Vue.js存储中复杂对象的反应性

我的问题

我试图将复杂项列表存储在存储中，并从组件访问这些项。我有一个mqtt接口，它接收这些项目的数据并更新存储中的值。但是，ui不会对更新这些项的属性作出反应

结构

在我的店里，我有两种突变：

状态：{
项目列表：{}
},
突变：{
///将新项目添加到itemList
[添加项目]（状态，项目）{
if（item&&！state.itemList[item.itemId]）
{
Vue.set（state.itemList、item.itemId、item）；
}
},
///使用有效负载中的数据更新现有项
[SET_ITEM_STAT]（状态，{itemId，payload}）{
var item=state.itemList[itemId]；
如果（项目）{
item.prop1=有效载荷.prop1；
item.prop2=有效载荷.prop2；
} 
}
},
行动：{
///在与mqtt（重新）建立连接时从外部调用一次
initializeMqttSubscriptions（{commit，dispatch}，mqtt）{
subscribeItem（“items/stat”，异步函数（itemId，topic，payload）{
提交（SET_ITEM_STAT，{itemId，payload}）；
});
},
...
}

我还尝试：

• 使用

  Vue.set（state.itemList、itemId、item）设置项属性

• 使用

  Vue.set（state.itemList[itemId]、'prop1'，payload.prop1）设置项属性

我还想展示如何构建访问和显示这些项目的组件（

Item.vue

）。它是一个组件，通过路由参数传递

itemId

以显示。我得到了以下计算属性：

项目-{id}
{{item.prop1}}
...

。。。
计算：{
id（）{
返回此。$route.params.itemId；
},
项目（{
返回此.store.state.items.itemList[this.id]；
}
}

因此，当路由参数

itemId

更改时，我可以成功地看到项目数据，一切正常。但是，如果我使用上面显示的变异来更新项目的属性，则不会触发视图中的更新

---

如果有人能告诉我我做错了什么，我会非常高兴。提前谢谢

由于我无法发表评论要求澄清

如果您确定itemlist是嵌套对象，请尝试使用object.assign

[SET_ITEM_STAT](state, { itemId, payload }) {
    var item= state.itemList[itemId];
    if (item) {
this.state.itemList[itemId] = Object.assign({}, this.state.itemList[itemId].prop1, {payload.prop1})
this.state.itemList[itemId] = Object.assign({}, this.state.itemList[itemId].prop2, {payload.prop2})

// or
this.state.itemList[itemId] = Object.assign({}, this.state.itemList[itemId], {prop1: payload.prop1, prop2: payload.prop2})
    } 
  }

让我知道进展如何

---

谢谢达里奥，这解决了我的问题！我曾尝试使用spread语法创建一个新实例，但现在我明白了，这并没有真正创建项目的深度副本。再次感谢！很乐意帮忙：）