关于vuex的...mapActions、 ...mapState、...mapMutations和...mapGetters的理解

背景：

mapState、mapGetters、mapMutations、mapActions他们返回的都是一个对象，而vue的methods、computed也是一个对象。在js中不能把多个对象直接放到一个对象中，如：{{name:‘aaa’},{age:18}}是错的，故而需要特殊的方法处理。

下面，将以mapState为代表详细展示：

首先：我们先回顾一下vue的methods用法：

<script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{},
            methods:{}
        })
 </script>

以上是vue的常规定义，我们可以看到methods后接的是一个对象

接下来，我们再看mapState的用法：

第一种：

// vuex 提供了独立的构建工具函数 Vuex.mapState
	import { mapState } from 'vuex'
	export default {
	  // ...
	  computed: mapState({
	    // 箭头函数可以让代码非常简洁
	    count: state => state.count,
	    // 传入字符串 'count' 等同于 `state => state.count`
	    countAlias: 'count',
	    // 想访问局部状态，就必须借助于一个普通函数，函数中使用 `this` 获取局部状态
	    countPlusLocalState (state) {
	      return state.count + this.localCount
	    }
	  })
	}

以上vuex官网代码，这里是直接把mapState对象赋给了computed，但是computed的写法并不是computed:{}。其实这里的还是把一个对象赋值给了methods，只是限制了这个对象只能是一个mapState对象。我们都知道在vuex中，computed不单单可以接收mapState对象也可以接收mapGetters对象。当computed要同时接收mapState和mapGetters怎么办呢？

首先、我们不可能为一个vue实例写两个computed,因为后者会覆盖前者。所以只能这样写：

// vuex 提供了独立的构建工具函数 Vuex.mapState
import { mapState } from 'vuex'
export default {
  computed: {
	mapState({
      })，
	mapGetters({
      })
	}
}

只有这样子我们才能保证computed都接收到mapState和mapGetters。但是如果这样进行编译的话就会报错。

所以我们只能用 …mapState 、…mapGetters 。

我们先来看看 … 是什么东东。… 叫做扩展运算符，是es6的知识。具体的解释百度就有了，我理解不深就不误人子弟。反正通过这个 … 可以把多个对象合并成一个对象，再把这个合并好的最终对象传入到computed 属性去。

我们来看看官方文档的解释：

注意，mapState 返回一个对象。我们如何使用 mapState 合并其他局部的计算属性呢？通常地，为了将多个对象合并为一个对象，再把这个合并好的最终对象传入到 computed 属性去，我们不得不使用一个工具函数来实现。然而有了对象扩展运算符（ECMAScript 提案 stage-3），我们可以大大简化语法：

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

来自 https://vuex.vuejs.org/zh/guide/state.html

这就是mapState第二种用法了。

那段编译出错的代码则改成：

// vuex 提供了独立的构建工具函数 Vuex.mapState
import { mapState } from 'vuex'
export default {
  computed: {
	  ...mapState({
      })，
	  ...mapGetters({
      })
	}
}