组件不会从 vuex 存储中获取更改

Question

https://codepen.io/bohdanafanasyev/pen/ZgqPWv?editors=1010

以上是我现在面临的问题的示例，其逻辑如下：
1.从firebase加载记录
2. 用它们填充状态
3. 显示状态的渲染组件

此时，一切都按预期工作。

4、向 Firebase 添加新产品
4.1 成功后将产品添加到状态

在控制台中，我们可以看到提交已经添加了产品，但组件本身并没有接收到更改。

有人可以建议上面的逻辑中缺少什么。

P.S：如果有人能提出更好的方法来恢复命名空间模块状态，我也将不胜感激。

Object.assign(state, newState)

Answer 1

这里有两个更改以使 cart 反应：

1. 在cart/state 中声明cart 属性，以便在您的商店中拥有state: {cart: {}}；
2. 在您的addProduct 突变中，将state.cart[productName] = "" 更改为 Vue.set(state.cart, productName, "")。

外卖是

1. 始终声明属性以使其具有反应性；
2. 如果不能事先声明属性，使用Vue.set添加属性；

有关reactivity的更多信息。