面试题：Vuex中如何定义和使用mutations

Question

在Vuex中，mutations是用于修改state的唯一方法。请详细阐述如何定义mutations，包括其接收的参数，以及在组件中如何触发mutations来修改应用状态。

Answer 1

定义mutations

1. 在Vuex store中定义：在创建Vuex store实例时，在mutations对象中定义方法。例如：

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

2. 接收参数：
   • 第一个参数：state，它是Vuex store中的状态对象。通过修改这个对象的属性来改变应用状态。例如上面increment函数中的state，可以直接修改state.count。
   • 第二个及后续参数：可以接收额外的载荷（payload）。例如：

mutations: {
  setValue(state, value) {
    state.someValue = value;
  }
}

这里的value就是载荷，它可以是任何类型的数据，根据具体需求传递。

在组件中触发mutations修改应用状态

1. 使用mapMutations辅助函数（在组件的methods中）：
   • 首先在组件中导入mapMutations：

import { mapMutations } from 'vuex';

• 然后在组件的methods中使用mapMutations将mutations映射为组件的方法：

export default {
  methods: {
   ...mapMutations([
      'increment',
    ])
  },
  mounted() {
    this.increment();
  }
};

2. 直接通过this.$store.commit触发：

export default {
  methods: {
    updateState() {
      this.$store.commit('increment');
      // 如果mutations需要载荷
      this.$store.commit('setValue', 'new value');
    }
  }
};

通过以上两种方式，可以在Vue组件中触发mutations从而修改Vuex中的应用状态。