Vuex中的辅助函数怎么使用？

在Vuex中，为了方便开发，提高代码的可读性和减少冗余代码，我们可以使用一些辅助函数。这些辅助函数包括mapState、mapGetters、mapMutations和mapActions。

1. mapState：通过这个函数，我们可以将store中的state映射到组件的computed计算属性中，从而实现对store中状态变量的访问。使用示例：

   import { mapState } from 'vuex'
   ​
   export default {
     computed: {
       ...mapState(['count'])  // 在模板中就可以使用 this.count 访问到store中的count状态变量
     }
   }

2. mapGetters：通过这个函数，我们可以将store中的getters映射到组件的computed计算属性中，从而实现对store中计算状态的获取。使用示例：

   import { mapGetters } from 'vuex'
   ​
   export default {
     computed: {
       ...mapGetters(['doneTodos'])
     }
   }

3. mapMutations：通过这个函数，我们可以将store中的mutations映射到组件的methods方法中，从而实现对store中状态变量的修改。使用示例：

   import { mapMutations } from 'vuex'
   ​
   export default {
     methods: {
       ...mapMutations(['increment']),
       addCount() {
         this.increment();  // 调用increment方法时，会自动触发store中的increment mutations
       }
     }
   }

4. mapActions：通过这个函数，我们可以将store中的actions映射到组件的methods方法中，从而实现对store中异步操作的触发。使用示例：

   import { mapActions } from 'vuex'
   ​
   export default {
     methods: {
       ...mapActions(['incrementAsync']),
       addCount() {
         this.incrementAsync();  // 调用incrementAsync方法时，会自动触发store中的incrementAsync actions
       }
     }
   }