请问该我数据还没有拿到vue就渲染了页面该怎么解决啊?

问题遇到的现象和发生背景
问题相关代码,请勿粘贴截图

img

运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

模块化 vuex ...mapstate来拿数据 拆分vue的来拿数据

img

img

将store中的userlist默认值改为[],不要用null或者undefined,因为请求数据需要时间,会先渲染默认值
另外改一下computed属性

    import {mapState} from 'vuex'
  export default {
    name: 'App',
      computed: {
          ...mapState('user_info_modules', [
              'userlist'
          ])
      },
  }

还有就是最好加一个全局的getter或者user_info_modules下加个getter返回userlist
改成下面这种

    import {mapGetters} from 'vuex'
  export default {
    name: 'App',
      computed: {
          ...mapGetters('user_info_modules', [
              'userlist'
          ])
      }
  }

懂你代码意思了,你想 store里面请求 userList渲染页面
computed注释掉,直接渲染$store.state.user_info_modules

<div v-for="(item, index) in $store.state.user_info_modules" :key="index"></div>

先说结论:出现这种情况的原因是computed会在mounted之前执行。
如果你的用法是初始化页面时获取userList数据,同时需要计算userList数据的话,可以把获取userList值的代码放在created中。

可以使用v-if,userList没有值的时候v-if为false,当userList有值得时候v-if为true,这样就不会报错了。
v-if="userList && userList.length > 0"

在mounted方法中加个判断,如果userlist为空,则不执行dispatcher方法,或者执行mounted方法时,延迟一秒在跳转

userList默认值修改为空对象,或者渲染的时候先判断下userList有没有

1)把渲染的代码放到onload里面 吧

方法一:设置默认值 为空 例如:

返回数据
data:{
name:'zs',
age:18
}
默认数据
data:{
name:'',
age:''
}
返回后进行替换

方法二:可以将要渲染的页面加 v-if 判断 返回就显示

方法采用这两个回调试一下。

img

created(){
      this.convert();
    },
    methods: {
      convert: function () {
        axios.get("api/sysUser/getSomething").then(res => {
          this.title = res.data;
        })
      }
    }