未定义的vuex 3状态变量

Question

我试图使用Vue 2.5.2和Vuex 3.0.1设置应用程序，我唯一不能解决的是这个警告：

  

[Vue警告]：渲染错误：＆＃34; TypeError：_vm.product未定义＆＃34;

product 只是产品的元素，是一个存储在Vuex状态的数组，在创建Vue实例之后执行下一行之后填充：

vm.$store.dispatch('getProducts')

在我的组件中，我使用下一个计算属性获取产品：

product: function () {
    return this.$store.getters.getProductById(this.id)
  },

this.id 由Vue Router发送（并且已正确定义）。 getter看起来像这样：

getProductById: (state) => (id) => {
return state.products.find(product => product.id === id)

}，

出现此警告后，实际显示产品信息，因此我猜Vue会在Vuex实际从服务器检索信息之前尝试加载和呈现信息。

有关如何让Vue等待Vuex以适当有效的方式加载数据的任何想法？

Answer 1

我发现了这个问题。作为specified in the Vue 2 API，Vue只能保证一个对象在被正确初始化后才会被动。

在我的Vuex状态下，我确实初始化了我试图通过this.$store.getters.getProductById(this.id)访问的产品对象。空结构看起来像这样： product: {}

但是我错过了一个应该放在产品嵌套对象中的数组。所以最后我通过初始化结构解决了这个问题，如下所示： `

product: {
  color_group: {
    colors: []
  }
}

` 这就是全部。