vuex辅助函数使用

小龙 / 2023-08-14 / 原文

一：mapState的使用

此函数返回一个对象，生成计算属性 - 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。mapState可以声明多个

需要在组件中引入：

　　　　需要在组件中引入：import { mapState } from 'vuex'

　　　　　　　　　　　　　...mapState({ // ... }) 对象展开运算符

二：mapGetters的使用

将store中的多个getter映射到局部组件的计算属性中

　　　　组件中引入:import { mapGetters } from 'vuex'

　　　　组件的computed计算属性中使用

　　　　1 computed: {

 　　　　3     // 使用对象展开运算符将 getter 混入 computed 对象中
 　　　　4     ...mapGetters([
 　　　　5 
 　　　　6     'doneTodosCount',
 　　　　7 
 　　　　8     'anotherGetter',
 　　　　9 
　　　　10     // ...
　　　　11     ])
　　　　12 
　　　　13 }

　　　　mapGetters({

    　　doneCount: 'doneTodosCount'

　　　　})

三：mapMutations的使用

　　　　将组件中的 methods 映射为 store.commit 调用（需要在根节点注入store）。
　　　　组件中引入：import { mapMutations } from 'vuex'


　　　　组件的methods中使用：两种方式，传参字符串数组或者对象，

methods: {
 2 
 3     ...mapMutations([
 4 
 5     'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
 6     // `mapMutations` 也支持载荷：
 7     'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
 8     ]),
 9 
10     ...mapMutations({
11 
12         add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
13     })
14 
15 }

四：mapMutations的使用

　　　　　　将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

　　　　　　　　组件中引入：import { mapActions } from 'vuex'

1 methods: {
 2 
 3     ...mapActions([
 4 
 5     'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
 6     // `mapActions` 也支持载荷：
 7     'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
 8     ]),
 9 
10     ...mapActions({
11 
12         add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
13     })
14 
15 }