面试题：Vuex 如何知道 state 是通过 mutation 修改还是外部直接修改的？

在 Vuex 中，state 的修改必须通过提交 mutation 来完成，这是 Vuex 的核心设计原则之一。Vuex 通过以下机制确保 state 只能通过 mutation 修改，并能够检测到外部直接修改 state 的行为：

---

1. 严格模式（Strict Mode）

Vuex 提供了 严格模式，在严格模式下，如果 state 被直接修改（而不是通过 mutation），Vuex 会抛出错误。

启用严格模式：

在创建 Vuex Store 时，可以通过 strict: true 启用严格模式。

const store = new Vuex.Store({
  strict: true, // 启用严格模式
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

严格模式的实现原理：

• Vuex 在内部使用 watch 监听 state 的变化。
• 如果 state 的变化不是由 mutation 触发的，Vuex 会抛出错误。

示例：

store.state.count = 10; // 直接修改 state，严格模式下会抛出错误
store.commit('increment'); // 通过 mutation 修改 state，正常执行

---

2. Mutation 的唯一入口

Vuex 规定，state 的修改必须通过提交 mutation 来完成。mutation 是修改 state 的唯一入口。

示例：

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

// 正确方式：通过 commit 提交 mutation
store.commit('increment');

// 错误方式：直接修改 state
store.state.count = 10; // 严格模式下会抛出错误

---

3. 开发环境与生产环境的区别

• 开发环境：建议启用严格模式，以便及时发现直接修改 state 的错误。
• 生产环境：建议关闭严格模式，因为严格模式会深度监听 state 的变化，可能带来性能开销。

动态启用严格模式：

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 开发环境启用，生产环境关闭
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

---

4. 如何检测外部直接修改 state？

在严格模式下，Vuex 会通过以下步骤检测 state 的修改：

1. 监听 state 的变化：Vuex 使用 watch 监听 state 的变化。
2. 检查修改来源：如果 state 的变化不是由 mutation 触发的，Vuex 会抛出错误。

示例：

store.state.count = 10; // 直接修改 state
// 严格模式下会抛出错误：
// Error: Do not mutate vuex store state outside mutation handlers.

---

5. 如何避免直接修改 state？

• 始终通过 mutation 修改 state：确保所有对 state 的修改都通过 commit 提交 mutation。
• 使用 Vuex 的辅助函数：如 mapMutations，简化 mutation 的提交。

示例：

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['increment']),
    handleClick() {
      this.increment(); // 通过 mutation 修改 state
    },
  },
};

---

总结

• 严格模式：Vuex 通过严格模式检测 state 是否被直接修改。
• Mutation 的唯一入口：state 的修改必须通过提交 mutation 来完成。
• 开发环境与生产环境：开发环境建议启用严格模式，生产环境建议关闭以提升性能。
• 避免直接修改 state：始终通过 mutation 修改 state，并使用 Vuex 的辅助函数简化操作。

通过以上机制，Vuex 能够确保 state 的修改是可控的，并能够检测到外部直接修改 state 的行为。