组件无法从vuex存储中获取更改

Question

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

上面是我现在面临的问题的示例，其逻辑如下：
1.从Firebase加载记录
2.用它们填充状态
3.呈现状态

的渲染组件

至此，所有工作都按预期进行。

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

在控制台中，我们可以看到提交已添加了产品，但是组件本身未接受更改。

有人可以提出以上逻辑中缺少的内容吗？

P.S：如果有人可以在更好的还原命名空间模块状态的方法上留下自己的见解，我也将不胜感激。

elem.getClientRects()

Answer 1

为了使cart具有反应性，此处进行了两项更改：

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

要点是

1. 始终声明该属性以使其具有反应性；
2. 如果您无法事先声明该属性，请使用Vue.set添加该属性；

有关reactivity的更多信息。