vuex的辅助函数该如何使用

目录

mapStatemapGettersmapMutationsmapActios多个modules

mapState

import { mapState } from \'vuex\'

export default {
  // ...
  computed:{
     ...mapState({
         // 箭头函数可使代码更简练
         count: state => state.count,
         // 传字符串参数 \'count\' 等同于 `state => state.count`
         countAlias: \'count\',

         // 为了能够使用 `this` 获取局部状态，必须使用常规函数
         countPlusLocalState (state) {
             return state.count + this.localCount
         }
  	})
  }
}

定义的属性名与state中的名称相同时，可以传入一个数组

//定义state
const state={
    count:1,
}

//在组件中使用辅助函数
computed:{
    ...mapState([\'count\'])
}

mapGetters

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

当属性名与getters中定义的相同时，可以传入一个数组

computed:{
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      \'doneTodosCount\',
      \'anotherGetter\',
      // ...
    ])
  }
}

总结：

mapState与mapGetters都用computed来进行映射
在组件中映射完成后，通过this.映射属性名进行使用

mapMutations

methods:{
    ...mapMutations({
        add: \'increment\' // 将 `this.add()` 映射为 `this.$store.commit(\'increment\')`
    })
}

当属性名与mapMutatios中定义的相同时，可以传入一个数组

methods:{
    ...mapMutations([
        \'increment\', // 将 `this.increment()` 映射为 `this.$store.commit(\'increment\')`

        // `mapMutations` 也支持载荷：
        \'incrementBy\' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit(\'incrementBy\', amount)`
    ]),
}

mapActios

mathods:{
    ...mapActions({
        add: \'increment\' // 将 `this.add()` 映射为 `this.$store.dispatch(\'increment\')`
    })
}

当属性名与mapActios中定义的相同时，可以传入一个数组

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

总结

mapMutations与mapActios都在methods中进行映射
映射之后变成一个方法

多个modules

在不使用辅助函数的时候，

this.$store.commit(\'app/addCount\')

使用辅助函数，辅助函数的第一个参数给定命名空间的路径

computed: {
  ...mapState(\'some/nested/module\', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions(\'some/nested/module\', [
    \'foo\', // -> this.foo()
    \'bar\' // -> this.bar()
  ])
}

或者使用 createNamespacedHelpers函数来创建一个基于命名空间的辅助函数

import { createNamespacedHelpers } from \'vuex\'

const { mapState, mapActions } = createNamespacedHelpers(\'some/nested/module\') //给定路径
//使用方法与之前相同
export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      \'foo\',
      \'bar\'
    ])
  }
}

以上就是vuex的辅助函数该如何使用的详细内容，更多关于vuex的辅助函数的资料请关注其它相关文章！