面试题：如何在组件中重复使用 Vuex 的 mutation？

在 Vuex 中，mutation 是用于修改状态的唯一方式。如果你需要在多个组件中重复使用相同的 mutation，可以通过以下几种方式实现：

1. 直接调用 `commit`

在组件中，可以通过 this.$store.commit('mutationName', payload) 直接调用 Vuex 中的 mutation。这是最常见的方式。

   // store.js
   const store = new Vuex.Store({
     state: {
       count: 0,
     },
     mutations: {
       increment(state, payload) {
         state.count += payload;
       },
     },
   });

   // Component.vue
   export default {
     methods: {
       increaseCount() {
         this.$store.commit('increment', 5); // 调用 mutation
       },
     },
   };

2. 使用 `mapMutations` 辅助函数

Vuex 提供了 mapMutations 辅助函数，可以将 mutation 映射到组件的 methods 中，方便重复使用。

   // Component.vue
   import { mapMutations } from 'vuex';

   export default {
     methods: {
       ...mapMutations({
         increment: 'increment', // 将 `increment` mutation 映射为组件方法
       }),
       increaseCount() {
         this.increment(5); // 直接调用映射的方法
       },
     },
   };

如果需要映射多个 mutation，可以传入数组：

   methods: {
     ...mapMutations([
       'increment', // 映射 this.increment() 到 this.$store.commit('increment')
       'decrement', // 映射 this.decrement() 到 this.$store.commit('decrement')
     ]),
   },

3. 将 `mutation` 封装为公共方法

如果某个 mutation 在多个组件中频繁使用，可以将其封装为一个公共方法，然后在组件中调用。

   // utils/mutations.js
   export function increment(store, payload) {
     store.commit('increment', payload);
   }

   // Component.vue
   import { increment } from '@/utils/mutations';

   export default {
     methods: {
       increaseCount() {
         increment(this.$store, 5); // 调用封装的公共方法
       },
     },
   };

4. 在 Actions 中复用 `mutation`

如果 mutation 的逻辑较为复杂，或者需要在多个地方复用，可以将其放在 action 中，然后在组件中调用 action。

   // store.js
   const store = new Vuex.Store({
     state: {
       count: 0,
     },
     mutations: {
       increment(state, payload) {
         state.count += payload;
       },
     },
     actions: {
       incrementAsync({ commit }, payload) {
         setTimeout(() => {
           commit('increment', payload); // 在 action 中调用 mutation
         }, 1000);
       },
     },
   });

   // Component.vue
   export default {
     methods: {
       increaseCount() {
         this.$store.dispatch('incrementAsync', 5); // 调用 action
       },
     },
   };

5. 使用 Vuex 模块化

如果项目较大，可以将 mutation 封装到 Vuex 模块中，然后在多个组件中复用模块中的 mutation。

   // store/modules/counter.js
   const counterModule = {
     namespaced: true,
     state: {
       count: 0,
     },
     mutations: {
       increment(state, payload) {
         state.count += payload;
       },
     },
   };

   // store/index.js
   import counterModule from './modules/counter';

   const store = new Vuex.Store({
     modules: {
       counter: counterModule,
     },
   });

   // Component.vue
   export default {
     methods: {
       increaseCount() {
         this.$store.commit('counter/increment', 5); // 调用模块中的 mutation
       },
     },
   };

如果使用 mapMutations，可以指定模块名：

   methods: {
     ...mapMutations('counter', {
       increment: 'increment', // 映射 this.increment() 到 this.$store.commit('counter/increment')
     }),
   },

6. 动态调用 `mutation`

如果需要根据条件动态调用不同的 mutation，可以将 mutation 名称作为参数传递。

   // Component.vue
   export default {
     methods: {
       callMutation(mutationName, payload) {
         this.$store.commit(mutationName, payload); // 动态调用 mutation
       },
     },
   };