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

各位靓仔靓女，老少爷们，今天咱们来聊聊 Vuex 里那个有点“轴”的 strict 模式。别看它平时好像没啥存在感，但一旦你的代码不老实，偷偷摸摸地想改 state，它可就跳出来跟你急眼了。咱们今天就扒开它的裤衩，看看它到底是怎么揪出这些“小偷”的。

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

简单来说，strict 模式就是 Vuex 提供的“代码警察”。它的职责只有一个：确保你只能通过 mutation 来修改 state。如果你绕过 mutation 直接修改 state，它就会毫不留情地抛出一个错误，让你老老实实地回去改代码。

strict 模式的开启方式

要在 Vuex 中开启 strict 模式，只需要在创建 Store 实例时，设置 strict: true 即可：

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

strict 模式的工作原理：核心机制分析

strict 模式的核心机制是利用了 JavaScript 中 Object.freeze() 和 Proxy 这两个特性。

Object.freeze()： 这个方法可以冻结一个对象。冻结后的对象无法添加新的属性，也无法修改或删除已有的属性。任何尝试修改冻结对象的操作都会被忽略，在 strict 模式下，会抛出错误。
Proxy： Proxy 对象用于创建一个对象的代理，从而可以拦截并自定义对该对象的基本操作（例如读取属性、赋值、枚举、函数调用等）。

Vuex 在 strict 模式下，会递归地冻结 state 对象的所有属性。然后，它会使用 Proxy 来拦截对 state 的修改操作。如果检测到非 mutation 修改 state 的行为，Proxy 就会抛出一个错误。

源码剖析：strict 模式的实现细节

咱们现在就来深入 Vuex 的源码，看看 strict 模式的具体实现。

assert 函数：断言神器

Vuex 源码中大量使用了 assert 函数来进行断言。 assert 函数的作用是：如果传入的条件为 false，就抛出一个错误。咱们先看看它的定义：
```
function assert (condition, msg) {
  if (!condition) throw new Error(`[vuex] ${msg}`)
}
```

createStore 函数：Store 的创建

strict 模式的逻辑主要在 createStore 函数中。 createStore 函数负责创建 Store 实例。咱们简化一下 createStore 函数的代码，只保留与 strict 模式相关的部分：

function createStore (options) {
  const {
    strict = false
  } = options

  const store = {
    _committing: false, // 标志是否在 mutation 中
    strict
  }

  // 初始化 state
  store.state = options.state || {}

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

  return store
}

enableStrictMode 函数：开启 strict 模式

enableStrictMode 函数负责开启 strict 模式。它的主要作用是：设置 vm._watchers，并使用 deepFreeze 冻结 state。
```
function enableStrictMode (store) {
  assert(
    typeof Promise !== 'undefined',
    `vuex requires a Promise polyfill in this browser.`
  )

  store._vm.$watch(function () { return this.$data.$$state }, () => {
    console.warn(`[vuex] Do not mutate vuex store state outside mutation handlers.`)
  }, { deep: true, sync: true })
}
```
这里关键点：
- 首先，我们需要确保环境中存在 Promise，因为 Vuex 的一些内部实现依赖于 Promise。
- 使用 vm._watchers 监听 state 的变化。一旦 state 发生变化，就会输出警告信息。 deep: true 表示深度监听，sync: true 表示同步执行。

commit 函数：mutation 的提交

commit 函数负责提交 mutation。在 commit 函数中，Vuex 会设置 _committing 标志为 true，表示当前正在执行 mutation。在 mutation 执行完毕后，Vuex 会将 _committing 标志设置为 false。

commit (_type, _payload, _options) {
  // ...
  const mutation = { type: type, payload: payload }
  const state = this.state

  this._withCommit(() => {
    mutations[type].forEach(handler => {
      handler(state, payload)
    })
  })
  // ...
}

_withCommit 函数：控制 _committing 标志

_withCommit 函数负责控制 _committing 标志。它的作用是在执行 mutation 之前设置 _committing 标志为 true，在 mutation 执行完毕后设置 _committing 标志为 false。
```
_withCommit (fn) {
  const committing = this._committing
  this._committing = true
  fn()
  this._committing = committing
}
```
_watcher 函数：state 的监听

_watcher 函数负责监听 state 的变化。它的作用是：在 state 发生变化时，检查 _committing 标志是否为 true。如果 _committing 标志为 false，说明 state 的变化不是由 mutation 引起的，此时就会抛出一个错误。
```
// 在 enableStrictMode 中注册的监听函数，简化版
() => {
  if (!this._committing) {
    console.warn(`[vuex] Do not mutate vuex store state outside mutation handlers.`)
  }
}
```

核心逻辑总结：strict 模式如何检测非 mutation 修改 state 的情况

监听 state 的变化： 通过 vm._watchers 深度监听 state 的变化。
_committing 标志： 使用 _committing 标志来区分 state 的变化是否是由 mutation 引起的。在 mutation 执行之前，_committing 标志被设置为 true；在 mutation 执行完毕后，_committing 标志被设置为 false。
错误提示： 当 state 发生变化时，如果 _committing 标志为 false，说明 state 的变化不是由 mutation 引起的，此时就会输出错误提示。

代码示例：演示 strict 模式下的错误

咱们来看一个代码示例，演示在 strict 模式下，如果直接修改 state 会发生什么：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="mutateDirectly">Mutate Directly (Error)</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    mutateDirectly() {
      this.$store.state.count++; // 直接修改 state
    }
  }
}
</script>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  strict: true // 开启 strict 模式
})

在这个例子中，increment 方法通过 mutation 来修改 state，这是正确的。但是，mutateDirectly 方法直接修改了 state，这违反了 strict 模式的规定。当你点击 "Mutate Directly (Error)" 按钮时，控制台会抛出一个错误，提示你不要在 mutation 之外修改 state。

strict 模式的优缺点

优点：
- 提高代码可维护性： 强制使用 mutation 修改 state，使得状态的变化更加可追踪，方便调试和维护。
- 避免意外的状态修改： 防止在组件中意外地修改 state，避免出现难以预料的 bug。
缺点：
- 性能损耗： 开启 strict 模式会带来一定的性能损耗，因为 Vuex 需要监听 state 的变化。
- 调试困难： 在 strict 模式下，如果代码中存在非 mutation 修改 state 的情况，会导致错误提示，可能会增加调试的难度。

实际应用：什么时候应该开启 strict 模式？

一般来说，在开发环境下，建议开启 strict 模式。这样可以帮助你尽早发现代码中的问题，提高代码质量。在生产环境下，可以关闭 strict 模式，以提高性能。

strict 模式与 Vue Devtools 的关系

Vue Devtools 可以让你方便地查看 Vuex 的状态和 mutation 的执行情况。在 strict 模式下，Vue Devtools 会更加清晰地显示状态的变化，让你更容易找到问题所在。

总结：strict 模式是你的好帮手

总而言之，strict 模式是 Vuex 提供的一个非常有用的工具。它可以帮助你编写更加规范、可维护的代码。虽然开启 strict 模式会带来一定的性能损耗，但在大多数情况下，这种损耗是可以忽略不计的。因此，建议你在开发环境下开启 strict 模式，让它成为你的好帮手。

额外提示：一些容易犯错的情况

异步操作： 在异步操作中修改 state，很容易忘记使用 mutation。
第三方库： 有些第三方库可能会直接修改 state，导致 strict 模式报错。
嵌套对象： 修改嵌套对象的属性时，也需要通过 mutation。

结束语

今天咱们就聊到这里。希望通过今天的讲解，大家对 Vuex 的 strict 模式有了更深入的了解。记住，strict 模式是你的朋友，它可以帮助你写出更好的代码。以后写 Vuex 代码的时候，记得开启 strict 模式，让它来帮你把关！

希望各位听的开心，下次再见！

发表回复 取消回复

发表回复取消回复