vuex 组件mounted钩子函数异步请求 页面不渲染。

Question

问题描述

在具体组件中mounted生命周期中，使用fetch发送异步请求，在vuex的action和mutation中都可以拿到数据
但是页面不渲染

在action中使用了async和await没有获得预期效果

原始代码：

组件中
//template中elementui中的table
 <el-table
      :data="tableData"
      style="width: 100%">
//js      
data() {
    return {
      tableData: this.$store.state.tableData
    }
  },
 mounted(){
      fetch('http://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => this.$store.dispatch("tableData",{data:data}))

  },

//store.js中
const state = {
    tableData:[]
}

const mutations = {
    tableData(state,payload){
        state.tableData = payload.data
    }
}
const actions = {
    tableData({commit},payload){
        commit('tableData',payload);
    }
}

在action和mutations中payload都是可以取到数据的，但是页面不渲染

页面也没有报错，求大神指导。

Answer 1

应该还是生命周期的问题，data数据加载时，你的vuex.state还没有数据。
可以用computed试试

computed: {
  tableData  () {
    return this.$store.state.tableData;
  }
}

Answer 2

组件中v-if="tableData"试试

Answer 3

获取到后 拷贝一个作为数据源 试试