vuex中的辅助函数

了解

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'])
}