扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
为麒麟等地区用户提供了全套网页设计制作服务，及麒麟网站建设行业解决方案。主营业务为网站设计、成都网站设计、麒麟网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
Vuex 中的 mutation 非常类似于事件：
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。mutation 必须是同步函数。
不带载荷（只改变数据的状态）
接前面几篇文章的例子，这里我们修改商品价格减半。
store.js
mutations: {
//商品价格减半；更改这个数据状态必须将这个数据源state传递过来
goodsPriceHalve: state => {
let goodsPriceHalve = state.goodsList.map(currentValue => {
return {
name: currentValue.name,
price: currentValue.price/2
}
})
state.goodsList = goodsPriceHalve;
}
}page5.vue
要唤醒一个 mutation handler，你需要以相应的 type（事件） 调用 store.commit 方法。
我是第三个页面
{{$store.state.goodsList}}
更改商品名字
商品：{{item.name}}
价格：￥{{item.price}}
效果图
提交载荷（Payload）（改变数据状态的同时传递参数）
参数：字符串/对象
这里修改商品名字。
store.js
// 通过组件上的事件，通过this.$store.commit('mutations中的函数','需要从组件上传递给 mutation中这个函数的参数')
mutations: {
// 统一修改商品的名称；changeName(state,payload)参数1 state：数据源，参数2 payload：接收的参数
changeName: (state,payload) => {
var changeName = state.goodsList.map(currentValue => {
return {
name: payload,//接收参数
price: currentValue.price/2
}
})
state.goodsList = changeName;
}
}这里的载荷payload可以是一个对象/字符串。
page6.vue
我是第四个页面
action
商品：{{item.name}}
价格：￥{{item.price}}
这里的载荷payload就是输入框的值。
效果图
代码执行过程
上面的Mutation执行过程是：按钮点击–>执行组件中按钮点击事件方法–>执行$store.commit('vuex中mutatioms对象中对应的函数名',需要传递的参数)–>执行mutations里面对应的方法–>修改state里面对应的数据–>页面渲染。
Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
最好提前在你的 store 中初始化好所有所需属性。当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：
state.obj = { ...state.obj, newProp: 123 }总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对创新互联的支持。如果你想了解更多相关内容请查看下面相关链接
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网