了解
vuex提供了一些非常方便的辅助函数，比如mapState、mapGetter、mapMutation、mapAction。初学vuex时，并未深究以上函数，只是走马观花的看了看。
暴露问题
在使用vuex的时候，仅仅了解State、Getter、Mutation、Action、Module等概念，在使用过程中，业务功能逐渐增加，会出现很多个状态。当一个组件需要多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
辅助函数
mapState
引入
import { mapState } from 'vuex
3种用法
- 对象
computed: mapState({ // 箭头函数 count: state => state.count, // 这里为了能够使用this获取局部变量localCount，必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } })
如果使用箭头函数，当vuex的state和当前组件的state，含有相同的变量名称时，this获取的是vuex中的变量，而不是局部变量
- 数组
当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
- 对象展开运算符
mapState函数返回的是一个对象。如果需要将它与局部计算属性混合使用，通常我们需要一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给computed属性。
computed: {
localComputed () {},
...mapState({})
}
也可以使用`...mapState([])`,但前提是映射的计算属性的名称与state的子节点名称相同，如果state在vuex的modules中，则不成功。
mapGetters
mapGetters将store中的getter映射到局部计算属性
computed: {
...mapGetters([
'oneGetter',
'anotherGetter'
])
}
mapMutations
使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
methods: {
// 将this.tips映射成 this.$store.commit('tips')
...mapMutations(['tips'])
}
mapAction
使用mapActions辅助函数将组件的methods映射成store.dispatch调用
methods: {
// 将this.tips映射成 this.$store.dispatch('tips')
...mapActions(['tips'])
}
