#### mapState
通过前面的学习，我们知道，从 store 实例中读取状态最简单的方法就是在[计算属性](https://cn.vuejs.org/guide/computed.html)中返回某个状态。
那么，当一个组件需要获取多个状态的时候，怎么办？是不是这样：
~~~kotlin
export default {
...
computed: {
a () {
return store.state.a
},
b () {
return store.state.b
},
c () {
return store.state.c
},
...
}
}
~~~
当然，这样是没问题的，但是总感觉写起来很难受，看起来更难受是吧！既然这么容易我们就感受到了，Vuex 能感受不到吗，能忍得了吗？
绝对不能忍，所以 `mapState` 辅助函数被创造了出来，用来搞定这个人人为之咬牙切齿的痛点。
~~~jsx
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
a: state => state.a,
b: state => state.b,
c: state => state.c,
// 传字符串参数 'b'
// 等同于 `state => state.b`
bAlias: 'b',
// 为了能够使用 `this` 获取局部状态
// 必须使用常规函数
cInfo (state) {
return state.c + this.info
}
})
}
~~~
通过上面的示例，可以了解到，我们可以直接把需要用到的状态全部存放在 `mapState` 里面进行统一管理，而且还可以取别名，做额外的操作等等。
如果所映射的计算属性名称与 state 的子节点名称相同时，我们还可以更加简化，给 `mapState` 传一个字符串数组：
~~~cpp
computed: mapState([
// 映射 this.a 为 store.state.a
'a',
'b',
'c'
])
~~~
因为 `computed` 这个计算属性接收的是一个对象，所以由上面的示例代码可以看出，`mapState` 函数返回的是一个对象，现在如果想要和局部的计算属性混合使用的话，可以使用 ES6 的语法这样写来大大简化：
~~~cpp
computed: {
localComputed () {
...
},
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
~~~
了解了 `mapState` 辅助函数后，接下来的几个辅助函数的用法也基本上都差不多了，我们继续往下看。
#### mapGetters
这个和 `mapState` 基本上没啥区别，简单看下官方的例子，就懂了：
~~~jsx
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
~~~
取个别名，那就用对象的形式，以下示例的意思就是把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`。
~~~css
mapGetters({
doneCount: 'doneTodosCount'
})
~~~
#### mapMutations
直接看示例代码：
~~~jsx
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
// 将 `this.increment()` 映射为
// `this.$store.commit('increment')`
'increment',
// `mapMutations` 也支持载荷：
// 将 `this.incrementBy(amount)` 映射为
// `this.$store.commit('incrementBy', amount)`
'incrementBy'
]),
...mapMutations({
// 将 `this.add()` 映射为
// `this.$store.commit('increment')`
add: 'increment'
})
}
}
~~~
简直不要太好用，连载荷也可以直接支持。
#### mapActions
和 `mapMutations` 用法一模一样，换个名字即可。
~~~jsx
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
// 将 `this.increment()` 映射为
// `this.$store. dispatch('increment')`
'increment',
// `mapActions` 也支持载荷：
// 将 `this.incrementBy(amount)` 映射为
// `this.$store. dispatch('incrementBy', amount)`
'incrementBy'
]),
...mapActions({
// 将 `this.add()` 映射为
// `this.$store. dispatch('increment')`
add: 'increment'
})
}
}
~~~
想要在组件中调用，直接 `this.xxx` 就完了。
