Vue 3源码极客之：`Pinia`的`State`：其内部如何利用`Ref`和`reactive`实现响应式。

各位观众，各位朋友，大家好！我是今天的主讲人，人称代码界的“老司机”，今天咱们聊点儿硬核的——Pinia 的 State，看看它怎么玩转 Ref 和 reactive，实现那让人心动的响应式。

开场白：响应式世界的二重奏

在 Vue 的世界里，响应式是基石。数据一变，视图立马更新，这种丝滑体验离不开 Vue 提供的各种响应式工具。今天的主角 Pinia，作为 Vue 的官方推荐状态管理库，自然也把响应式玩得飞起。它内部对 State 的处理，巧妙地结合了 ref 和 reactive，打造了一个既灵活又高效的响应式系统。

第一幕：State 的本质——数据，数据，还是数据！

首先，我们要明确一点：State 的本质就是数据。这些数据代表着应用程序的状态，比如用户的登录状态、购物车里的商品、页面的加载状态等等。Pinia 要做的，就是让这些数据变得“敏感”，一旦发生变化，就能通知到所有依赖它的地方。

第二幕：Ref 的初体验——简单数据，简单爱

对于简单的基本类型数据（比如数字、字符串、布尔值），Pinia 通常会选择 ref。ref 的作用是创建一个响应式的 引用。这个引用指向一个值，当我们修改这个值时，Vue 的响应式系统就能感知到。

举个例子：

import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: ref(0), // 使用 ref 创建响应式的 count
  }),
  actions: {
    increment() {
      this.count++; // 直接修改 ref 的值
    },
  },
});

在这个例子里，count 就是一个 ref 对象。当我们调用 increment 方法时，this.count++ 实际上是在修改 count.value。Vue 会自动追踪 count.value 的变化，并更新所有依赖它的组件。

简单总结一下 ref 的特点：

特性	说明
适用类型	基本类型（数字、字符串、布尔值等）
访问方式	需要通过 .value 访问和修改值
原理	内部使用 Object.defineProperty 实现 getter 和 setter 的拦截
优势	简单易用，性能好
劣势	只能包裹单个值，对于复杂对象不太方便

第三幕：Reactive 的进阶——复杂对象，复杂爱

对于复杂的数据结构，比如对象和数组，Pinia 则会选择 reactive。reactive 可以将一个普通 JavaScript 对象转换为响应式对象。这意味着，对象的所有属性都会被 Vue 的响应式系统追踪。

看个例子：

import { reactive } from 'vue';
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: reactive({ // 使用 reactive 创建响应式的 user 对象
      name: 'John Doe',
      age: 30,
      address: {
        city: 'New York',
        country: 'USA',
      },
    }),
  }),
  actions: {
    updateName(newName) {
      this.user.name = newName; // 直接修改 reactive 对象的属性
    },
    updateCity(newCity) {
      this.user.address.city = newCity; // 修改嵌套的 reactive 对象
    },
  },
});

在这个例子里，user 是一个 reactive 对象。当我们调用 updateName 或 updateCity 方法时，Vue 会自动追踪 user 对象及其嵌套属性的变化，并更新所有依赖它们的组件。

再来总结一下 reactive 的特点：

特性	说明
适用类型	对象和数组
访问方式	直接访问和修改对象的属性
原理	内部使用 Proxy 实现属性的拦截（Vue 3）或者 Object.defineProperty (Vue 2)
优势	可以方便地处理复杂的数据结构，使用起来更自然
劣势	性能略低于 ref，因为需要追踪对象的多个属性

第四幕：Ref + Reactive 的组合拳——灵活应对，各有千秋

Pinia 并非简单地二选一，而是根据数据的特点，灵活地使用 ref 和 reactive。有时候，它甚至会将两者结合起来，发挥各自的优势。

比如，我们可以将一个 reactive 对象中的某个属性设置为 ref：

import { ref, reactive } from 'vue';
import { defineStore } from 'pinia';

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    settings: reactive({
      theme: ref('light'), // theme 是一个 ref
      fontSize: 16,
    }),
  }),
  actions: {
    toggleTheme() {
      this.settings.theme.value = this.settings.theme.value === 'light' ? 'dark' : 'light';
    },
  },
});

在这个例子里，settings 是一个 reactive 对象，而 theme 则是 settings 对象的一个 ref 属性。这样做的好处是，我们可以更精细地控制响应式的范围，只让 theme 的变化触发更新，而 fontSize 的变化则不会。

第五幕：Pinia 源码揭秘——深入虎穴，一探究竟

现在，让我们稍微深入一点，看看 Pinia 内部是如何使用 ref 和 reactive 的。

虽然我们无法在这里完整地展示 Pinia 的源码，但我们可以提取一些关键的片段，帮助大家理解其实现原理。

首先，Pinia 会对 state 进行递归处理，根据属性的类型，选择使用 ref 或 reactive。

function reactiveState(rawState) {
  if (isRef(rawState)) {
    return rawState
  }

  if (isObject(rawState)) {
    return reactive(rawState)
  }

  return ref(rawState)
}

这个函数会判断传入的 rawState 是否已经是一个 ref，如果是，则直接返回。如果是一个对象，则使用 reactive 进行处理。否则，使用 ref 将其转换为响应式数据。

此外，Pinia 还会对 actions 进行处理，将 this 指向 store 实例，方便在 action 中访问 state 和其他 action。

function createSetupStore(id, setup, options = {}) {
  const store = {
    $id: id,
    $patch(patch) {
      // ...
    },
    $reset() {
      // ...
    },
    // ...
  };

  const setupResult = setup();

  // 将 setupResult 中的属性添加到 store
  for (const key in setupResult) {
    store[key] = setupResult[key];
  }

  // 处理 actions
  for (const key in store) {
    const value = store[key];
    if (typeof value === 'function') {
      store[key] = value.bind(store); // 将 action 的 this 指向 store
    }
  }

  return store;
}

这段代码展示了 Pinia 如何将 setup 函数返回的结果添加到 store 实例，并对 actions 进行绑定，使其能够访问 store 的内部状态。

第六幕：最佳实践——合理选择，事半功倍

在使用 Pinia 时，如何选择 ref 和 reactive 呢？这里有一些建议：

• 简单数据用 ref： 对于数字、字符串、布尔值等简单类型的数据，优先选择 ref。它更轻量级，性能更好。
• 复杂对象用 reactive： 对于对象和数组等复杂类型的数据，使用 reactive 更方便。它可以自动追踪对象的所有属性的变化。
• 按需组合： 可以将 ref 和 reactive 结合起来使用，更精细地控制响应式的范围。
• 性能优化： 如果性能是关键，可以考虑使用 shallowRef 和 shallowReactive。它们只进行浅层响应式转换，可以减少不必要的性能开销。

第七幕：避坑指南——小心驶得万年船

在使用 Pinia 的过程中，有一些常见的坑需要注意：

• 不要直接修改 ref 的 value 属性： 应该使用赋值操作符 this.count++，而不是直接修改 this.count.value。虽然两种方式都能达到目的，但前者更符合 Vue 的规范。

• 小心 reactive 的解构： 解构 reactive 对象会导致失去响应式。如果需要解构，可以使用 toRefs 将 reactive 对象的属性转换为 ref。

  import { reactive, toRefs } from 'vue';
  
  const state = reactive({
    name: 'John Doe',
    age: 30,
  });
  
  const { name, age } = toRefs(state); // 使用 toRefs 将 reactive 对象的属性转换为 ref
  
  console.log(name.value); // 'John Doe'
  console.log(age.value); // 30
  
  state.name = 'Jane Doe';
  
  console.log(name.value); // 'Jane Doe' (响应式更新)

• 避免在 reactive 对象中直接添加新属性： Vue 无法追踪动态添加的属性。如果需要动态添加属性，可以使用 Vue.set 或 Object.assign。

结尾：响应式之路，永无止境

Pinia 的 State 管理，看似简单，实则蕴含着 Vue 响应式系统的精髓。通过对 ref 和 reactive 的巧妙运用，Pinia 实现了高效、灵活的状态管理，为 Vue 应用的开发带来了极大的便利。

当然，响应式之路永无止境。随着 Vue 的不断发展，Pinia 也会不断进化，为我们带来更多惊喜。希望今天的分享能帮助大家更深入地理解 Pinia 的 State 管理，并在实际开发中灵活运用。

感谢各位的观看！下次再见！