...mapMutations的使用-优快云博客

本文介绍了如何在Vue.js的Vuex状态管理中使用ES6的...运算符来简化数据同步，通过实例展示了如何导入mapMutations并调用mutation更新state。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在es6中更新了…拓展运算的写法：

首先我们要先知道三个点是什么意思…；简单点理解可以讲三个点看成就是省略号，省略号表示有些东西被隐藏了，用省略号就是表示这个对象是可以展开的，所以三个点ES6中也定义为扩展运算符或者展开运算符。

2、下面以示例介绍：
首先在vuex定义：

export default new Vuex.Store({
	state: {
		// 展示数据
		detail: {},
	},
mutations: {
		//方法名字自定义（）
		changeDetail(state, paylod) {
			// 信息
			this.detail=paylod
	      }
	    }
}

在vuex里存入数据之后呢我们下一步需要在页面使用的地方调用，
1、在组件中导入vuex中的mapMutations:

//引入vuex（mapMutations主要是传递参数，辅助函数）
import {
		mapMutations
	} from "vuex"

2、在methods下使用…引用

methods: {
			...mapMutations(['changeDetail']),
}

最后一步，在需要存入vuex的时候调用

this.changeDetail(data)

这样就可以实现同步vuex存储的数据了。