面试题：Vuex 的 action 和 mutation 之间有什么区别？

Vuex 中的 action 和 mutation 是状态管理的两个核心概念，它们的主要职责和使用方式有显著区别。以下是它们之间的主要区别：

1. 职责不同

Mutation：
- 用于同步修改状态。
- 是唯一可以直接修改 Vuex state 的方式。
- 每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler），回调函数接收 state 作为第一个参数。
- 示例：
```
mutations: {
  increment(state) {
    state.count++;
  }
}
```
Action：
- 用于处理异步操作或复杂的业务逻辑。
- 不能直接修改状态，而是通过提交 mutation 来间接修改状态。
- 可以包含任意异步操作（如 API 请求、定时器等）。
- 示例：
```
actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
}
```

2. 调用方式不同

Mutation：
- 通过 commit 方法调用。
- 示例：this.$store.commit('increment');
Action：
- 通过 dispatch 方法调用。
- 示例：this.$store.dispatch('incrementAsync');

3. 是否支持异步

Mutation：
- 必须是同步的。
- 同步操作确保状态变化是可追踪的，便于调试。
- 如果在 mutation 中执行异步操作，会导致状态变化不可预测。
Action：
- 可以是异步的。
- 适合处理需要等待的操作（如 API 请求）。
- 异步操作完成后，通过 commit 提交 mutation 来修改状态。

4. 调试工具支持

Mutation：
- 每个 mutation 都会被 Vuex 的调试工具（如 Vue Devtools）记录，方便追踪状态变化。
- 由于是同步的，状态变化是线性的，易于调试。
Action：
- action 本身不会被直接记录，但通过 action 提交的 mutation 会被记录。
- 由于可能包含异步操作，调试时需要注意异步操作的顺序和结果。

5. 使用场景

Mutation：
- 适用于简单的、同步的状态修改。
- 例如：计数器增减、切换布尔值等。
Action：
- 适用于需要异步操作或复杂逻辑的场景。
- 例如：从 API 获取数据、批量提交多个 mutation 等。

6. 参数传递

Mutation：

可以接收额外的参数（payload）。

示例：

mutations: {
  incrementBy(state, payload) {
    state.count += payload.amount;
  }
}
// 调用
this.$store.commit('incrementBy', { amount: 10 });

Action：

也可以接收额外的参数（payload）。

示例：

actions: {
  incrementByAsync({ commit }, payload) {
    setTimeout(() => {
      commit('incrementBy', payload);
    }, 1000);
  }
}
// 调用
this.$store.dispatch('incrementByAsync', { amount: 10 });

总结

特性	Mutation	Action
职责	同步修改状态	处理异步操作或复杂逻辑
调用方式	`commit`	`dispatch`
是否支持异步	必须是同步的	可以是异步的
调试支持	直接记录在调试工具中	通过提交 `mutation` 间接记录
使用场景	简单的状态修改	异步操作或复杂逻辑