分析 Vuex 源码中 `strict` 模式的实现原理，它如何检测非 `mutation` 修改 `state` 的情况。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天给大家带来一场关于 Vuex strict 模式的源码剖析。咱们的目标是：把这玩意儿扒得干干净净，让你彻底明白它怎么揪出那些偷偷摸摸修改 state 的坏家伙。

开场白：strict 模式是干啥的？

想象一下，你的 Vuex state 是一个装满金币的保险箱，只有特定的 mutation 才能打开它，并按照规矩往里放金币或者取金币。strict 模式就像一个超级保安，时刻监视着这个保险箱，一旦发现有人试图用非法的手段（比如直接修改 state）打开它，立马发出警报！

这玩意儿主要就是为了帮助我们在开发阶段发现问题，避免在大型项目中出现 state 莫名其妙被修改，导致数据流混乱的情况。

第一幕：createStore 的启动仪式

要理解 strict 模式，首先得从 Vuex 的 createStore 函数入手。这就像电影的开场，一切故事的源头都在这里。

// 简化后的 createStore 函数
function createStore (options = {}) {
  const {
    strict,
    // ... 其他选项
  } = options

  // ... 其他初始化代码

  const store = {
    // ... 其他属性和方法
    strict: !!strict,
  }

  // 初始化模块（ModuleCollection）
  installModule(store, state, [], rootModule, true)

  // 开启严格模式
  if (strict) {
    enableStrictMode(store)
  }

  return store
}

代码解析：

createStore 函数接收一个 options 对象，其中包含了 strict 选项。
store.strict = !!strict：将 strict 选项的值（转换成布尔值）保存到 store 实例上。
enableStrictMode(store)：如果 strict 为 true，则调用 enableStrictMode 函数来启动严格模式。

第二幕：enableStrictMode 才是主角

enableStrictMode 函数才是真正的核心，它负责安装必要的监控机制。

function enableStrictMode (store) {
  store._vm.$watch(function () { return this._data.$$state }, () => {
    if (!store._committing) {
      console.warn(`[vuex] Do not mutate vuex store state outside mutation handlers.`)
    }
  }, { deep: true, sync: true })
}

代码解析：

store._vm：这是 Vuex 内部使用的 Vue 实例，它负责管理 state。
this._data.$$state：这个是 Vuex 存储 state 的地方。$$state 是 Vue 内部使用的属性，用于存储响应式数据。
$watch：Vue 的 $watch 方法用于监听数据的变化。这里我们监听的是 this._data.$$state 的变化。
{ deep: true, sync: true }：deep: true 表示深度监听，即如果 state 是一个对象，那么对象内部的属性变化也会被监听到。sync: true 表示同步执行回调函数，这意味着一旦 state 发生变化，回调函数会立即执行。
if (!store._committing)：store._committing 是一个标志位，用于指示当前是否正在执行 mutation。如果在 mutation 之外修改了 state，那么 store._committing 的值就是 false，此时会输出警告信息。

重点：_committing 这个小间谍

_committing 是一个非常重要的变量，它就像一个间谍，时刻记录着当前是否正在执行 mutation。

// 在 mutation 中设置 _committing 为 true
function commit (_type, _payload, _options) {
  // ...
  const commit = (entry) => {
    // ...
    wrapWithCommit(function commitHandler (payload) {
      return entry.handler(payload)
    })
  }

  function wrapWithCommit (fn) {
    return function () {
      const committing = store._committing
      store._committing = true
      fn()
      store._committing = committing
    }
  }
  // ...
}

代码解析：

commit 函数是 Vuex 中用于触发 mutation 的方法。
wrapWithCommit 函数是一个高阶函数，它接收一个函数 fn 作为参数，并返回一个新的函数。
在新返回的函数中，首先将 store._committing 设置为 true，表示正在执行 mutation。
然后执行 fn 函数（也就是 mutation 的处理函数）。
最后将 store._committing 恢复到原来的值。

第三幕：实战演练——揪出非法修改者

现在，让我们通过一些例子来演示 strict 模式是如何工作的。

场景 1：在组件中直接修改 state

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.state.count++; // 直接修改 state
    }
  }
};
</script>

在这个例子中，我们在组件的 increment 方法中直接修改了 state.count 的值。如果 Vuex 开启了 strict 模式，那么当我们点击 "Increment" 按钮时，控制台会输出警告信息：

[vuex] Do not mutate vuex store state outside mutation handlers.

场景 2：在 action 中直接修改 state

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        // 错误：不应该在 action 中直接修改 state
        this.state.count++;
        // 正确：应该提交 mutation
        // commit('increment');
      }, 1000);
    }
  },
  strict: true // 开启 strict 模式
});

在这个例子中，我们在 action 中直接修改了 state.count 的值。虽然看起来是在 action 内部，但仍然违反了 Vuex 的数据流原则。如果 Vuex 开启了 strict 模式，控制台同样会输出警告信息。

场景 3：使用 replaceState 替换 state

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    replaceState(state, newState) {
      Object.assign(state, newState); // 使用 Object.assign 替换 state
    }
  },
  actions: {
    resetState({ commit }) {
      commit('replaceState', { count: 0 });
    }
  },
  strict: true // 开启 strict 模式
});

在这个例子中，我们使用 Object.assign 替换了 state。虽然这是在 mutation 中进行的，但它仍然可能导致一些问题，比如丢失响应式。更好的做法是逐个修改 state 中的属性。strict 模式并不会直接阻止这种行为，但它会帮助我们发现潜在的问题。

第四幕：strict 模式的局限性

strict 模式虽然强大，但也有一些局限性。

性能开销： strict 模式会增加一些性能开销，因为它需要深度监听 state 的变化。因此，建议只在开发环境中使用 strict 模式，在生产环境中关闭它。
无法检测所有情况： strict 模式只能检测到直接修改 state 的情况，但对于一些间接修改，它可能无法检测到。例如，如果 state 中的一个属性是一个对象，而我们在组件中修改了这个对象的内部属性，strict 模式可能无法检测到这种变化。
只在同步操作中有效： strict 模式主要针对同步操作。如果在异步操作中修改了 state，那么 strict 模式可能无法及时发出警告。

第五幕：strict 模式的替代方案

如果 strict 模式的性能开销让你感到担忧，或者你希望更全面地监控 state 的变化，可以考虑使用以下替代方案：

Vue Devtools： Vue Devtools 是一个强大的调试工具，它可以帮助我们追踪 state 的变化，并查看是哪个 mutation 引起的。
Time Travel Debugging： Vuex 允许我们进行时间旅行调试，即可以回溯到之前的 state 状态，这对于调试复杂的应用非常有用。
自定义插件： 我们可以编写自定义插件来监控 state 的变化，并根据需要进行处理。例如，我们可以编写一个插件，记录所有修改 state 的操作，并生成一个日志文件。

总结：strict 模式的价值

总的来说，strict 模式是一个非常有用的工具，它可以帮助我们在开发阶段发现问题，避免在大型项目中出现 state 混乱的情况。虽然它有一些局限性，但只要我们正确使用它，就能大大提高开发效率和代码质量。

表格总结:

特性	描述
作用	监控 Vuex `state` 的变化，检测非 `mutation` 对 `state` 的直接修改，并在开发环境中发出警告。
实现原理	使用 Vue 的 `$watch` 方法深度监听 `state` 的变化。通过 `_committing` 标志位判断当前是否正在执行 `mutation`。如果在 `mutation` 之外修改了 `state`，则输出警告信息。
优点	帮助在开发阶段发现问题，避免 `state` 混乱。强制遵循 Vuex 的数据流原则。
缺点	增加性能开销，只在开发环境中使用。无法检测所有情况（例如间接修改）。只在同步操作中有效。
替代方案	Vue Devtools，Time Travel Debugging，自定义插件。
适用场景	开发环境，特别是大型项目。需要强制遵循 Vuex 数据流原则的场景。
开启/关闭方式	在 `createStore` 的 `options` 中设置 `strict: true` 开启，`strict: false` 关闭。
核心代码	`store._vm.$watch(function () { return this._data.$$state }, () => { ... }, { deep: true, sync: true })` 和 `store._committing` 标志位。
注意事项	生产环境中关闭 `strict` 模式。理解 `strict` 模式的局限性。结合其他调试工具使用。
调试信息	`[vuex] Do not mutate vuex store state outside mutation handlers.`

好了，今天的讲座就到这里。希望大家对 Vuex 的 strict 模式有了更深入的了解。记住，代码世界里，规矩很重要，strict 模式就是来帮你维护规矩的！散会！

发表回复 取消回复

发表回复取消回复