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

各位观众老爷们，晚上好！我是你们的老朋友，今天咱们来聊聊 Vuex 源码里一个挺有意思的家伙： strict 模式。别看它名字挺严肃，实际上是个抓 bugs 的小能手。尤其是那些偷偷摸摸不在 mutation 里修改 state 的家伙，它都能给你揪出来。咱们今天就扒一扒它的皮，看看它到底是怎么做到的。

Part 1: 啥是 strict 模式？为啥要有它？

首先，得搞清楚 strict 模式是干嘛的。在 Vuex 里，官方推荐（强制？）你通过 mutation 来修改 state。这么做的好处是：

可追踪性： 所有的 state 变更都记录在案，方便调试和状态管理。
可预测性： state 的变更都是同步的，不会出现状态竞争等问题。
时间旅行： 借助 Vuex 的插件，可以实现状态的“时间旅行”，回到之前的状态。

但是，总有那么一些不安分的家伙，喜欢直接修改 state，比如：

// 假设我们有一个 state
const state = {
  count: 0
}

// 不规范的修改方式
state.count++ // 这样是不行的！

这种直接修改 state 的方式，会让 Vuex 的状态管理机制失效。你不知道是谁、在什么时间、以什么方式修改了 state。就像你的代码里藏了一颗定时炸弹，随时可能爆炸。

strict 模式就是为了解决这个问题而生的。开启 strict 模式后，Vuex 会在任何非 mutation 修改 state 的时候抛出一个错误，让你知道： "嘿！老兄，你违规了！"

Part 2: strict 模式的实现原理：watch 和 commit

strict 模式的核心原理是利用 Vue 的 watch 机制，监视 state 的变化，并在 mutation 之外的修改发生时抛出错误。

具体来说，它主要做了两件事：

在初始化 Vuex store 的时候，递归地 watch state 的所有属性。
重写 commit 方法，在 mutation 执行前后设置一个标志位，表示当前是否处于 mutation 执行过程中。

让我们先来看一下 Vuex 源码（简化版）中 strict 模式的初始化部分：

function createStore (options) {
  // ... 省略其他代码

  const strict = options.strict

  // 递归地 watch state 的所有属性
  if (strict) {
    enableStrictMode(store)
  }

  // ... 省略其他代码

  return store
}

function enableStrictMode (store) {
  store._committing = true // 初始状态设置为 true，避免初始化时触发 watch

  watchState(store.state, store)

  store._committing = false
}

function watchState (state, store) {
  Object.keys(state).forEach(key => {
    if (typeof state[key] === 'object' && state[key] !== null) {
      watchState(state[key], store) // 递归 watch
    }
    watch(state, key, () => {
      if (!store._committing) {
        console.error(`[vuex] Do not mutate vuex store state outside mutation handlers.`)
      }
    }, { deep: true, sync: true })
  })
}

function watch (obj, key, cb, options) {
    // 模拟 Vue 的 watch 功能， simplified version
    let oldValue = obj[key];

    Object.defineProperty(obj, key, {
        get() {
            return oldValue;
        },
        set(newValue) {
            if (oldValue !== newValue) {
                cb(newValue);
                oldValue = newValue;
            }
        }
    });
}

代码解释：

createStore 函数是 Vuex store 的初始化函数。如果 options.strict 为 true，则调用 enableStrictMode 函数。
enableStrictMode 函数首先将 store._committing 设置为 true，这是为了避免在初始化 state 的时候触发 watch。然后，调用 watchState 函数递归地 watch state 的所有属性。最后，将 store._committing 设置为 false。
watchState 函数遍历 state 的所有属性，如果属性是对象，则递归调用 watchState 函数。然后，使用 watch 函数 watch 当前属性。
watch 函数模拟 Vue 的 watch 功能，当 state 的属性发生变化时，会调用回调函数。回调函数会判断 store._committing 是否为 true。如果为 false，则表示当前不是在 mutation 中修改 state，抛出一个错误。

接下来，我们看一下 commit 方法的重写：

function createStore (options) {
  // ... 省略其他代码

  const store = {
    // ... 省略其他代码
    commit: (type, payload, options) => {
      commit(type, payload, options)
    }
  }

  function commit (_type, _payload, _options) {
    // ... 省略其他代码

    const entry = mutations[_type]
    if (!entry) {
      // ... 省略错误处理
      return
    }

    store._withCommit(() => {
      entry.call(store, store.state, _payload)
    })
  }

  store._withCommit = function (fn) {
    const committing = store._committing
    store._committing = true
    fn()
    store._committing = committing
  }

  // ... 省略其他代码

  return store
}

代码解释：

createStore 函数创建了一个 commit 方法，该方法实际上调用了内部的 commit 函数。
commit 函数首先根据 type 找到对应的 mutation。如果没有找到，则抛出一个错误。
然后，调用 store._withCommit 函数执行 mutation。
store._withCommit 函数是关键。它首先保存了 store._committing 的值，然后将 store._committing 设置为 true。在 mutation 执行完毕后，再将 store._committing 恢复为之前的值。这样，在 mutation 执行期间，store._committing 的值为 true，watch 函数就不会抛出错误。

Part 3: 一个完整的例子：strict 模式是如何工作的？

为了更好地理解 strict 模式的工作原理，我们来看一个完整的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Vuex Strict Mode Example</title>
</head>
<body>
  <div id="app">
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment (Mutation)</button>
    <button @click="incrementDirectly">Increment Directly (Error!)</button>
  </div>

  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>

  <script>
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      strict: true // 开启 strict 模式
    })

    new Vue({
      el: '#app',
      store,
      computed: {
        count () {
          return this.$store.state.count
        }
      },
      methods: {
        increment () {
          this.$store.commit('increment')
        },
        incrementDirectly () {
          this.$store.state.count++ // 错误！
        }
      }
    })
  </script>
</body>
</html>

在这个例子中，我们开启了 strict 模式。当点击 "Increment (Mutation)" 按钮时，会通过 mutation 修改 state，一切正常。但是，当点击 "Increment Directly (Error!)" 按钮时，会直接修改 state，这时，控制台会抛出一个错误：

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

这就是 strict 模式的作用：帮助你找到那些偷偷摸摸修改 state 的家伙，确保你的 Vuex 应用的状态管理是可控的。

Part 4: strict 模式的性能考量

strict 模式虽然可以帮助你找到潜在的 bugs，但是它也会带来一定的性能损耗。因为它需要递归地 watch state 的所有属性，并在每次 state 变化时进行检查。

因此，官方建议只在开发环境中使用 strict 模式，在生产环境中关闭它。你可以通过以下方式来关闭 strict 模式：

const store = new Vuex.Store({
  // ... 省略其他代码
  strict: process.env.NODE_ENV !== 'production' // 只在开发环境开启 strict 模式
})

Part 5: 总结：strict 模式的优缺点

特性	优点	缺点
功能	强制执行 `mutation` 修改 `state` 的规则，避免直接修改 `state` 导致的状态管理混乱。帮助开发者尽早发现潜在的 bugs。 * 提高代码的可维护性和可预测性。	* 在生产环境中会带来一定的性能损耗。
适用场景	开发环境。大型 Vuex 应用，需要严格的状态管理。 * 团队协作开发，需要统一的代码规范。	* 对性能要求极高的应用，或者状态管理逻辑非常简单的应用。
使用方式	在 Vuex store 的初始化配置中，将 `strict` 属性设置为 `true`。建议只在开发环境开启 `strict` 模式，在生产环境中关闭它。	* 不建议在生产环境中使用 `strict` 模式。
原理	递归地 `watch` `state` 的所有属性。重写 `commit` 方法，在 `mutation` 执行前后设置一个标志位，表示当前是否处于 `mutation` 执行过程中。 * 如果在 `mutation` 之外修改 `state`，则抛出一个错误。	* 需要额外的内存和 CPU 资源来维护 `watch` 和标志位。

总而言之，strict 模式是一个非常有用的工具，可以帮助你编写更健壮、更易于维护的 Vuex 应用。但是，你需要根据实际情况来决定是否使用它。

好了，今天的讲座就到这里。希望大家对 Vuex 的 strict 模式有了更深入的了解。记住，写代码要规范，不要偷偷摸摸修改 state 哦！感谢各位的观看，咱们下期再见！

发表回复 取消回复

发表回复取消回复