浅谈vuex（二）——辅助函数

       上一篇中我们对vuex做出了一些基本的了解——包括它的基础概念、基础使用方法及技术使用场景，有兴趣的彦祖可以移步浅谈vuex（一）了解，本次我们来讲讲vuex的进阶一些的用法——辅助函数。

        这里我们还是先抛出问题：1.什么是辅助函数？ 2.辅助函数的作用是什么？

一、辅助函数的定义与作用。

       在Vuex中，mapState, mapGetters, mapMutations 和 mapActions 这些辅助函数就是语法糖。即辅助函数可以以更简洁、更容易读懂的方式来帮助我们使用vuex中的状态和方法。

      vuex辅助函数有四个mapState、mapMutations、 mapActions、 mapGetters.

         

        假如我们在vuex的store中定义了一些状态：

const state = {
  userInfo: {},
  roles: [],
  loginFlag: '',
  permission: []
}

      我们在组件中需要用到他们的时候就需要这样：

computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
     roles() {
      return this.$store.state.roles
    },
    loginFlag() {
      return this.$store.state.loginFlag
    },
    permission() {
      return this.$store.state.permission
    },
  }

       这样用并没有问题，但是有聪明的彦祖就会想到：那我这个组件要用100个vuex中的状态怎么办？如果都这样列举出来岂不是非常不简洁且麻烦？于是就出现了辅助函数。

  二、辅助函数的引入与使用

       辅助函数的引入与使用其实都很简单。

       当我们需要在组件中使用辅助函数时，我们可以直接这样引入：

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

       使用如下：

1.mapState 辅助函数

       mapState是vuex中状态State对应的辅助函数，如我们上述的例子中那样定义好状态后：

// store/index.js

const state = {
  userInfo: {},
  roles: [],
  loginFlag: 'test',
  permission: []
}

     在组件中：

// 先引入辅助函数
import { mapState } from 'vuex'

// 使用扩展运算符 ... 将这个对象的属性展开到组件的 computed 选项中。

export default {
  computed: {
    ...mapState([
      'userInfo',
      'roles',
      'loginFlag',
      'permission'
    ])
  }
}

        这样就可以在组件中通过 this.userInfo、this.roles、this.loginFlag 和 this.permission 来访问这些状态了。 试想如果有100个或更多状态，这样写是否就使代码简洁了很多！

2.mapGetters 辅助函数

         官网上的例子很好，我就抄一下官网的哈：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 这里我加一个不用辅助函数的使用方法来做对比
    doneTodosCount() {
      return this.$store.getters.doneTodosCount
    },
   anotherGetter() {
      return this.$store.getters.anotherGetter
    },
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

      如果你想给它改个名字：

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

       这样你就可以在组件中通过this.doneCount来访问到store/index中的getters中的doneTodosCount了。

3.mapMutations 辅助函数

       mapMutations是vuex中状态的唯一方法mutation对应的辅助函数，相对于在组件中多次使用this.$store.commit('xxx') 来提交方法，我相信各位彦祖肯定更喜欢看起来更有技术含量且更简洁的mapMutations：

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

      其上的  add: 'increment' 如同getters一样也是改名的方法。

4.mapActions 辅助函数

       在组件中可以使用 this.$store.dispatch('xxx') 分发 action，也可使用 mapActions 辅助函数来将Action映射为方法来使用：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

三、总结

       总结一下使用辅助函数需要注意的点：

      1.使用前不要忘了先在vuex中引入对应的辅助函数。

      2. mapState、mapGetters一般映射于组件的computed中； mapMutations、mapActions一般映射于组件的methods中。

      3.可以根据组件对vuex中状态和方法的实际引入量选择是否使用辅助函数。

      以上即为辅助函数使用的全部内容，如果各位彦祖亦菲有兴趣，我们还可以再深入的讲讲vuex的进阶使用。（其中部分演示代码来源于官网，如有侵权请联系我。）