分析 Vuex/Pinia 源码中 `strict` 模式的实现，以及它如何通过 `Proxy` 或 `Object.defineProperty` 拦截 `state` 修改。

各位观众老爷们，晚上好！今天咱们聊点有意思的，扒一扒 Vuex 和 Pinia 里“strict”模式的底裤，看看它们是怎么用黑科技拦着你不小心改了 state 的。

开场白：State Mutation 的罪与罚

先问大家一个问题：在 Vue 的世界里，什么最重要？数据！数据就是生命线，state 就是你的王国。一旦 state 出了问题，整个应用都会鸡飞狗跳。而最常见的问题之一，就是不小心直接修改了 state。

Vuex 和 Pinia 就像你家的管家，负责维护 state 的安全。它们都提供了“strict”模式，当你开启这个模式后，任何直接修改 state 的行为都会被抓个现行，给你一个红彤彤的警告。

那么问题来了，它们是怎么做到的呢？答案就是：Proxy 和 Object.defineProperty 这两个 JavaScript 界的老朋友。

Vuex 的 Strict 模式：老派的守护者

Vuex 比较老派，它主要用 Object.defineProperty 来实现 strict 模式。简单来说，就是把 state 里的每个属性都变成“只读”的（至少表面上是）。

// Vuex 源码简化版 (src/store.js)
function Store (options) {
  const strict = options.strict;
  this._committing = false; // 标志是否在 mutation 中

  // 模拟 state
  this._state = options.state || {};

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

  // ...其他代码
}

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 });
}

// Vue 实例初始化时会调用 resetStoreState
function resetStoreState (store, state) {
  store._vm.$data.$$state = state;

  // 开启 strict 模式后，递归地将 state 的属性设置为只读
  if (store.strict) {
    enableStrictMode(store);
  }
}

// Vuex 源码简化版 (src/util.js)
function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}

function enableStrictMode(store) {
  // 递归地设置 state 属性为只读
  function makeStrict(obj) {
    for (const key in obj) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        makeStrict(obj[key]); // 递归处理嵌套对象
      } else {
        Object.defineProperty(obj, key, {
          writable: false,
          configurable: false, // 防止删除属性
          enumerable: true
        });
      }
    }
  }

  makeStrict(store.state);
}

代码解读：

enableStrictMode(store): 这个函数是 strict 模式的核心。它遍历 store.state 的所有属性，并使用 Object.defineProperty 将它们设置为只读。
Object.defineProperty(obj, key, { writable: false, configurable: false, enumerable: true }): 这个方法是关键。
- writable: false：意味着你不能直接修改这个属性的值。
- configurable: false：意味着你不能删除这个属性，也不能再次使用 Object.defineProperty 修改它的配置。
- enumerable: true：意味着这个属性在 for...in 循环中可见。
_committing标志位: Vuex 使用 _committing 标志位来判断当前是否正在执行 mutation。只有在 mutation 函数内部，_committing 才会设置为 true，允许修改 state。在 mutation 函数外部，_committing 为 false，任何修改 state 的行为都会被拦截。

缺点：

性能问题： 遍历 state 并使用 Object.defineProperty 设置只读属性，对于大型 state 来说，性能开销比较大。
深度监听： 需要深度递归遍历 state，处理嵌套对象，增加了复杂性。
兼容性： 在一些老旧的浏览器中，Object.defineProperty 的行为可能不一致。

Pinia 的 Strict 模式：现代的守护者

Pinia 比较现代化，它拥抱了 Proxy 这个 ES6 的新特性。Proxy 就像一个代理，可以拦截对对象的所有操作，包括读取、写入、删除等等。

// Pinia 源码简化版 (src/store.ts)
export function defineStore(id, options) {
  const { state, actions, getters } = options;

  const store = reactive({
    $id: id,
    $patch,
    $reset,
    ...actions,
  });

  // 初始化 state
  const initialState = toReactive(state ? state() : {});

  // 开启 strict 模式
  if (options.strict) {
    store._customProperties.add('$state');
    Object.defineProperty(store, '$state', {
      get: () => initialState,
      set: (newState) => {
        console.warn(
          `[Pinia]: Direct mutation of store state is discouraged use $patch instead.`
        );
      },
    });
  } else {
    store.$state = initialState;
  }

  return store;
}

function toReactive(obj) {
  if (isObject(obj)) {
    return reactive(obj);
  }
  return obj;
}

// Pinia 源码简化版 (src/hmr.ts)
export function updateStore(newStore, hotStore) {
  if (hotStore._hmrPayload.state) {
    hotStore.$patch(
      (state) => {
        // preserve existing properties
        Object.assign(state, newStore);
      }
    );
  }

  // ... 更新 actions 和 getters
}

代码解读：

Proxy 拦截 set 操作： Pinia 使用 Proxy 拦截对 state 的所有 set 操作。当你尝试直接修改 state 时，Proxy 会立即跳出来，给你一个警告。
$patch 方法： Pinia 鼓励你使用 $patch 方法来批量更新 state。$patch 方法会先暂停 Proxy 的拦截，然后批量更新 state，最后再恢复 Proxy 的拦截。
toReactive()函数: 使用 Vue 3 的 reactive API 将 state 转换为响应式对象。这使得 Pinia 可以追踪 state 的变化，并在组件中触发更新。

优点：

性能更好： Proxy 的性能比 Object.defineProperty 更好，尤其是对于大型 state 来说。
更简洁： Proxy 的代码更简洁，更容易理解。
更强大： Proxy 可以拦截更多操作，例如读取、写入、删除等等。

总结：Vuex vs Pinia

特性	Vuex	Pinia
Strict 模式	`Object.defineProperty` 设置只读	`Proxy` 拦截 `set` 操作
更新 State	Mutations	`$patch` 方法
性能	较差，尤其是大型 State	更好
代码复杂度	较高	较低
兼容性	较好	需要 ES6 支持

为什么需要 Strict 模式？

Strict 模式就像一个代码警察，时刻监督你是否正确地修改 state。它可以帮助你：

避免意外修改： 防止你在组件中不小心直接修改 state，导致数据混乱。
强制使用 Mutations/Actions： 让你养成良好的习惯，始终通过 mutations (Vuex) 或 actions (Pinia) 来修改 state。
调试更方便： 当你看到 strict 模式的警告时，可以快速定位问题所在。

什么时候应该开启 Strict 模式？

开发阶段： 在开发阶段，强烈建议开启 strict 模式，尽早发现问题。
生产环境： 在生产环境中，可以关闭 strict 模式，以提高性能。但是，如果你对代码质量有很高的要求，也可以继续开启 strict 模式。

友情提示：

在 Vuex 中，strict 模式只能在开发环境中使用。在生产环境中，Vuex 会自动关闭 strict 模式。
在 Pinia 中，strict 模式可以在生产环境中使用，但是会带来一定的性能开销。

结尾：安全第一，State 第二

好了，今天的讲座就到这里。希望大家对 Vuex 和 Pinia 的 strict 模式有了更深入的了解。记住，数据安全第一，state 安全第二！以后可别再想着偷偷摸摸改 state 了，否则会被管家抓包的！

大家还有什么问题吗？没有的话，我就下班啦！祝大家编码愉快，bug 远离！

发表回复 取消回复

发表回复取消回复