Vue devtools更新，但组件没有

Question

在我的组件中，我有：

currentItem.recipe

currentItem是vuex中作为对象初始化的状态：

currentItem: {} 

在同一组件中，我使用mapState导入它：

...mapState('ItemStore', [
      'currentItem'
])

当我为其添加配方时，此突变称为：

ADD_ITEM_RECIPE: (state, recipe) => {
   state.currentItem.recipe = recipe
}

recipe是服务器对发布新食谱的请求的响应。

在我的组件中，我有一些v-if="currentItem.recipe"，一开始是错误的，因为currentItem没有recipe

该变异得以执行，在devtools中，我可以看到recipe被添加到currentItem中。但是组件不会更新。 v-if不会更改为true。在devtools中，如果我手动提交突变，它将按预期工作。

所以我试图将突变更改为：

state.currentItem.recipe = Object.assign({}, state.currentItem.recipe, recipe)

但是问题仍然存在。

为什么会这样，我该如何解决？

Answer 1

尝试重写整个对象：

ADD_ITEM_RECIPE: (state, recipe) => {
   state.currentItem = {...state.currentItem, recipe: recipe}
}

Answer 2

您正在向现有对象添加新密钥，因此这种反应性在该对象上不起作用。

@HansFelixRamos答案是正确的，但是您还有其他选择。

1. 您Object.assign很近，但没有雪茄。您需要更新整个对象。

   state.currentItem= Object.assign({}, state.currentItem, {recipe})

   这会将recipe添加到新对象，同时浅层复制state.currentItem中的所有信息。

2. 另一种方法是从开始就在状态对象上声明recipe。

state: {
 currentItem: {
  //other properties 
  recipe: false // or null, or undefined
 }
}

我认为第二种方法更适合，特别是对于较长路径的对象。如果为所有键声明默认值，则无需编写像const val = obj && obj.path1 && obj.path1.path2 && obj.path1.path2.path3这样的防御性代码即可访问深度嵌套的属性。