先说两句
前面已经讲完了 Vuex 下的 State、Getter、Mutation 及 Action 这四驾马车，不知道你们是否已经理解。固然，要想真正熟练掌握的话，仍是须要不断的练习和动手实践才行。前端
其实只要把这四驾马车彻底熟练驾驭了，那么应对一些中小型的项目，基本上就已经没啥问题了，后面的 Module 这架终极马车，实际上是为了搞定那些稍微大型复杂一点的项目，避免 store 里面的数据太多，难以管理而设计，这驾马车稍微比较抽象，不太好驾驭，咱们下一讲再来详细的去剖解它。vue
Vue 里面的不少配套设施，在使用体验上一直都追求着简洁，追求着极致，哪里不爽改哪里，因此这也是为何 Vue 可以长时间深得民心的一个很重要的缘由所在。那么这一讲，主要就和你们简单的聊一聊 Vuex 的一些经常使用的辅助函数。vuex
mapState
经过前面的学习，咱们知道，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。数组
那么，当一个组件须要获取多个状态的时候，怎么办？是否是这样：架构
export default {
...
computed: {
a () {
return store.state.a
},
b () {
return store.state.b
},
c () {
return store.state.c
},
...
}
}
固然，这样是没问题的，可是总感受写起来很难受，看起来更难受是吧！既然这么容易咱们就感觉到了，Vuex 能感觉不到吗，能忍得了吗？框架
绝对不能忍，因此 mapState 辅助函数被创造了出来，用来搞定这我的人为之咬牙切齿的痛点。函数
// 在单独构建的版本中辅助函数为 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 传一个字符串数组：this
computed: mapState([ // 映射 this.a 为 store.state.a 'a', 'b', 'c' ])
由于 computed 这个计算属性接收的是一个对象，因此由上面的示例代码能够看出，mapState 函数返回的是一个对象，如今若是想要和局部的计算属性混合使用的话，可使用 ES6 的语法这样写来大大简化：spa
computed: {
localComputed () {
...
},
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
了解了 mapState 辅助函数后，接下来的几个辅助函数的用法也基本上都差很少了，咱们继续往下看。
mapGetters
这个和 mapState 基本上没啥区别，简单看下官方的例子，就懂了：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
取个别名，那就用对象的形式，如下示例的意思就是把 this.doneCount 映射为 this.$store.getters.doneTodosCount。
mapGetters({
doneCount: 'doneTodosCount'
})
mapMutations
直接看示例代码：
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 用法如出一辙，换个名字便可。
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 就完了。
写在最后
不得不说，Vuex 在使用体验上面真的是用心良苦，用好这些辅助函数，将会大大增长咱们的开发效率，固然，有任何问题，欢迎留言，我们一块儿交流。
转载声明
做者：大宏说 连接：https://www.jianshu.com/p/c9b8bbaca875
后记
以上就是胡哥今天给你们分享的内容，喜欢的小伙伴记得点赞、收藏呦，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...
胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。 胡哥有话说，专一于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！