Vue 数据存储在 vuex 中但不显示在 UI 中答案

【问题标题】：Vue data being stored in vuex but not displaying in the UIVue 数据存储在 vuex 中但不显示在 UI 中
【发布时间】：2020-12-12 01:15:42
【问题描述】：

我正在尝试获取一些计划数据以显示在我的 Vue 应用程序中。数据是通过我在本地运行的 API 加载的。我已经想出了如何将数据添加到 store/vuex 和 vue 开发工具显示它很好但是我无法在 UI 中看到数据。我正在寻求帮助以解决数据未显示在 UI 中的原因。

在我的plans.vue 中，我只是对plans 数据进行了一个 for 循环，如果我手动将数据放入数组中，那么它就可以工作，因此在 store 和 data 道具之间的某个地方它被破坏了。

store.js

state: {
 plans: []
}
mutations: {
  loadPlans(state, plans) {
     state.plans = plans
 }
},
getters: {
    loadPlans(state) {
      return state.plans
    },
}

计划.vue

created() {
        PageOptions.pageEmpty = true;
        this.$store.dispatch('loadPlans')
    },
    data() {
        return {
            plans: this.$store.getters.loadPlans,
        }
    },

这被简化为仅包含用于此问题的代码，还有大量与此无关的代码。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

试试这样的：

store.js

state: {
  plans: []
},
getters: {
  loadedPlans(state) {
    return state.plans
  },
},
mutations: {
  setPlans(state, plans) {
    state.plans = plans
  }
},
actions: {
  async loadPlans({commit}) {
    await this.$axios.get('http://localhost/api/plans', function(response) {
      commit('setPlans', response.data)
    })
  }
}

plans.vue

async created() {
  await this.$store.dispatch('loadPlans')
},
computed: {
  myPlans() {
    return this.$store.getters.loadedPlans
  }
}

【讨论】：

我可以将其更改为不在创建的部分中使用异步等待吗？我创建了一些无法异步完成的内容
是的，您也可以直接在组件中使用$store.getters.loadedPlans，但使用异步等待更好，尝试重构其余代码使其完全异步
好的，所以我尝试了所有方法，除了 async await on created 并且它执行确切的名称操作，它填充状态并且它不会加载到 UI 中。当我在 store 调度之后对创建的创建执行 console.log 时，它返回 null 所以没有数据被传递给 data prop。
"loadPlans" 是一个承诺，这就是为什么您应该等待将提交“setPlans”的 axios 回调；尝试把 console.log this.$store.dispatch('loadPlans').then(() => { /* here */ })
这最终是最接近我使用的解决方案，标记为已解决

【解决方案2】：

您可以使用计算方法来获取值。甚至可能在设置状态值之前对数据对象进行一次评估。修改你的代码如下。

data:{
    return {};
}
,computed: {
    plans: this.$store.getters.loadPlans
}

【讨论】：

刚试了一下，它坏了，没有加载
“数据对象被评估一次，甚至可能在状态值设置之前”是正确的，这就是为什么你应该使用计算方法