vuex中使用三个点...mapMutations的各种写法是什么意思

首先我们要先知道三个点是什么意思...；简单点理解可以讲三个点看成就是省略号，省略号表示有些东西被隐藏了，用省略号就是表示这个对象是可以展开的，所以三个点ES6中也定义为扩展运算符或者展开运算符，好理解吧，那么想下面这部分代码又是什么意思呢？

index.vue文件

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' 
export default{
methods: {
  //1
  ...mapMutations({
      add: "add",  //相当于在当前页面执行this.add()方法，就等于执行了this.$store.commit("add")
  }),
  //2
  ...mapMutations({
      plus: "add",//跟上面1一样当前页面执行this.plus()方法，就等于执行了this.$store.commit("add")；plus相当于别名
  }),
  //3
  ...mapMutations([
      'add'  //跟1等同，另一种写法而已 ，这一整个方法展开就等于add(){this.$store.commit("add")},这样不就是methods里定义方法的形式吗？
  ]),
  //4
  ...mapMutations('filter', [
   'setValue' //意思是获取filter模块中mutation对象里的setValue方法，在这里展开，实际上就是setValue(){.........}；至于setValue里面是什么代码，就看filter模块的mutation对象的这个方法定义了什么
  ])
  
  
},
computed:{
  //5
  ...mapState({
    value: state => state.filter.value //等于value(){return this.$store.state.filter.value}//filter模块中state对象中的value值
  })
  //6
  ...mapState('filter', {
    value: state => state.value//跟5是一样的意思：获取filter模块中的state里的value值，filter模块是存在整个mapState对象里的
  })
}
}

上面的...意思就是展开跟在后面的函数/方法/对象的内容，后面是一个整体，所谓展开简单来说就是去掉外面的中括号/大括号，举例：

//1、数组
let arr=[1,2,3,4,5]
//如果要赋值给新数组
let newArr = ...arr;//错误写法，因为...arr展开后是字符串：1,2,3,4,5
let newArr = [...arr];//正确写法 [1,2,3,4,5]

//JSON对象
let jsonObj = {a:function(){},b:()=>{}};
//展开
...jsonObj
//等于
a:function(){
},
a:()=>{
}
//然后你就发现...mapMutations为什么会这么写，这种写法不就是将里面的元素一个个排列出来吗，放在methods里面正是符合写法规则的
//这两个的写法是不是可以简化成：
a(){
},
b(){
}
//所以就跟mutation对象里的写法一样了，看下面的filter.js代码
//慢慢对照多几遍就能理解了

为了更深入的了解nuxtjs项目中vuex是如何跟.vue文件联系起来用的，基于上面的写法，我们看看filter.js这个模块的代码:

const state = ({
 value: 'Hello World',
 num:1,
 list:[1,2,3]
});

const mutations = {
 setValue(state, value) {
   state.value = value;
 },
 test(state,n){
   state.num = n;
 },
 do(state,n){
  state.list.push(n);
 }
};
 
export default {
 state,
 mutations
};

然后filter.js这个模块是要被引入到nuxtjs项目中的store文件夹下的index.js中进行统一引用的，index.js文件如下：

import Vue from 'vue';
import Vuex from 'vuex';
import filter from './filter';
 
Vue.use(Vuex);
 
const store = () => new Vuex.Store({
 state: {
 },
 mutations: {
 },
 modules: {
  filter
 }
});
 
export default store

index.js文件是将store对象暴露给所有.vue文件全局使用的，调用方法为this.$store或者直接store都可以调用，而filter则是分模块，需要在index.js中引入，如果还有其他模块也是一样的引入与使用方法； 理解了这个结构，我们就知道为什么是这么用的了，
对于其他的对象比如mapActions、mapGetters，其实都是一样的用法，只不过mapActions适用于放有异步(dispatch)操作的方法，mapMutations适用于同步(commit)，这两个触发的方法分别是commit与dispatch。
vuex这个组件中的分块模式稍微复杂点，不过用于做大项目中不同组件间通信是很好的；普通经典模式对于组件间通信不是那么多的情况下是可以用的，不过nuxtjs3中之所以要去掉普通模式， 小编认为第一个原因是将所有共享对象都在一个文件里，会导致这个文件过大，另一个是因为很少的共享对象用普通模式还不如直接建立空vue对象，用bus来通信：this.$emit("a")与this.$on("a")更好，所以对于中大项目来说就必须用分块模式，分开管理不同的共享属性（公共抽象），新增的模块不会影响旧模块， 也更加方便管理； 好了，今天就说这么多，看不懂的同学可以多看几遍，慢慢理解。