Vuex getter无法更新状态更改

Posted 2021-03-30

当状态对象发生变化时，我无法获得更新的vuex getter。我正在尝试使用reduce函数来获取vuex getter以返回状态对象中值的总和。

// 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。

答案

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

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

为了使它成为反应，你需要使用$ set或object.assign

更新您的变异如下=>

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

另一答案

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

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

更多细节here