Vuex白话教程第五讲：Vuex的小帮手

文 | 大宏

先说两句

前面已经讲完了 Vuex 下的 State、Getter、Mutation 及 Action 这四驾马车，不知道大家是否已经理解。当然，要想真正熟练掌握的话，还是需要不断的练习和动手实践才行。

其实只要把这四驾马车完全熟练驾驭了，那么应对一些中小型的项目，基本上就已经没啥问题了，后面的 Module 这架终极马车，其实是为了搞定那些稍微大型复杂一点的项目，避免 store 里面的数据太多，难以管理而设计，这驾马车稍微比较抽象，不太好驾驭，我们下一讲再来详细的去剖解它。

Vue 里面的很多配套设施，在使用体验上一直都追求着简洁，追求着极致，哪里不爽改哪里，所以这也是为什么 Vue 能够长时间深得民心的一个很重要的原因所在。那么这一讲，主要就和大家简单的聊一聊 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传一个字符串数组：

computed: mapState([
 // 映射 this.a 为 store.state.a
 'a',
 'b',
 'c'
])

因为computed这个计算属性接收的是一个对象，所以由上面的示例代码可以看出，mapState函数返回的是一个对象，现在如果想要和局部的计算属性混合使用的话，可以使用 ES6 的语法这样写来大大简化：

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就完了。