未定义的 vuex 3 状态变量答案

【问题标题】：Undefined vuex 3 state variable未定义的 vuex 3 状态变量
【发布时间】：2018-05-16 21:34:22
【问题描述】：

我正在尝试使用 Vue 2.5.2 和 Vuex 3.0.1 设置应用程序，唯一无法摆脱的是这个警告：

[Vue 警告]：渲染错误：“TypeError: _vm.product is undefined”

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

vm.$store.dispatch('getProducts')

在我的组件中，我通过使用下一个计算属性获得了 product：

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

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

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

出现此警告后，实际的 product 信息会正确显示，所以我猜 Vue 会在 Vuex 实际从服务器检索到信息之前尝试加载和呈现信息。

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

【问题讨论】：

【解决方案1】：

我发现了问题。与specified in the Vue 2 API 一样，Vue 只能保证一个对象在正确初始化的情况下是响应式的。

在我的 Vuex 状态下，我确实初始化了我试图通过 this.$store.getters.getProductById(this.id) 访问的 product 对象。空结构如下所示： product: {}

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

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

` 仅此而已。

【讨论】：