Vuex getter 不更新状态更改

Question

当状态对象更改时，我无法更新 vuex getter。我正在尝试让 vuex getter 返回状态对象中值的总和，并带有一个 reduce 函数。

// Mutation
state.shippingFees[method.sellerId] = method.fee; // state.shippingFees = { 1: 1900 }; etc.

// Getter
totalShippingFees: state => Object.values(state.shippingFees).reduce((total, fee) => total + fee, 0)

在 state.shippingFees 对象中设置运费键值对后，getter 仍然只返回 0。

Answer 1

Vue 无法检测属性添加或删除

用 Vue.set(state.shippingFees, method.sellerId, method.fee)

更多细节在这里

Answer 2

Vue 不允许向已经创建的实例动态添加新的根级响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加反应性属性

因此，您更新上述对象的方式不是反应性的。因此，您的值不会在 getter 中更新。要了解有关 vue 反应性的更多信息，请阅读此处。

为了使其具有反应性，您需要使用 $set 或 object.assign

如下更新您的突变 =>

Vue.$set(state.shippingFees,method.sellerId,method.fee);