Vuex中的actions和mutations有什么区别？

在Vuex的状态管理流程中，actions和mutations是承担不同职责的两个核心概念。理解它们的区别是正确使用Vuex的关键。简单来说，mutations负责修改状态，而actions负责处理业务逻辑并提交mutations。

Mutations：同步的状态变更者

Mutations是改变Vuex store中state的唯一途径。每个mutation都有一个字符串类型的事件类型和一个回调函数，该回调函数接收state作为第一个参数，并直接对state进行修改。

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++; // 直接修改状态
    },
    incrementBy(state, payload) {
      state.count += payload.amount;
    }
  }
});

Mutations必须是同步的。它们的作用是确保每一次状态变更都是可追踪的，并且可以被开发工具记录下来。你不能在mutation中执行异步操作。

Actions：处理业务与异步的逻辑单元

Actions与mutations类似，但不直接修改状态。它们通过提交（commit）mutations来间接改变状态。Actions可以包含任意异步操作（如API请求、定时器）和复杂的业务逻辑。

const store = new Vuex.Store({
  state: { user: null },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    async fetchUser({ commit }, userId) {
      const response = await api.getUser(userId); // 异步请求
      commit('setUser', response.data); // 提交mutation来修改状态
    }
  }
});

Actions通过store.dispatch方法触发，接收一个与store实例具有相同方法和属性的context对象（可解构出commit、state等）和一个可选的payload。

核心区别总结

一个简单的比喻是：如果你把store看作一个银行，那么mutations就是银行柜员，他们直接操作你的账户（state），记录每一笔交易。而actions则是客户服务代表，你向他们提出请求（如转账），他们会处理复杂的流程（如验证身份、联系对方银行），最终指示柜员（mutation）完成账户的修改。

因此，最佳实践是：永远通过actions来触发复杂的操作（尤其是异步的），然后在action内部提交mutations来实际修改state。这保持了状态变更的纯粹性和可预测性，同时让业务逻辑集中且易于测试。