javascript - Vuex getter 不更新状态变化

标签 javascript vue.js vuejs2 vuex

当状态对象发生变化时,我无法更新 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。

最佳答案

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

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

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

更新您的突变如下 =>

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

关于javascript - Vuex getter 不更新状态变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55180530/

相关文章:

javascript - Rails `remote: true` 未发出 AJAX 请求

javascript - mysql循环 - 预加载数据?

javascript - 在 vuejs 2.0.0 中选择的占位符

html - 是否可以使用 VueJS 在同一页面上多次使用同一个应用程序?

javascript - 具有网格布局的可重用 Vue JS 搜索过滤器

vue.js - 如何将输入绑定(bind)到 vue.js 中的对象

javascript - Vue2 : How to redirect to another page using routes

javascript - ECMA-262 或 ECMA 5.1 之前的 Javascript 是否没有伪经典继承或原型(prototype)继承支持?

javascript - 在 Vue.js 中将事件从子组件引发到容器组件?

javascript - 如何向页面添加新的 Dijit 小部件?