深入分析 Pinia 源码中 `store` 实例的创建过程，以及它如何利用 Vue 3 的 `reactive` API 使 `state` 具有响应性。

Pinia 源码解剖：`store` 实例的炼成术，以及 `reactive` 的妙用

各位听众，晚上好！我是你们今晚的 Pinia 源码解剖向导。今天，咱们要深入 Pinia 的腹地，一起看看 store 实例是如何被创造出来的，以及 Vue 3 的 reactive 是如何在其中发挥关键作用的。

准备好了吗？让我们开始这场源码探险之旅！

1. 从 `defineStore` 开始：`store` 定义的起点

Pinia 的核心在于 defineStore 函数，它就像一个魔法工厂，负责生产各种各样的 store。让我们先来看看 defineStore 的基本用法：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

这段代码定义了一个名为 counter 的 store，它包含一个 state 属性 count，一个 getter 属性 doubleCount，和一个 action 属性 increment。

defineStore 的内部实现比较复杂，但我们可以抽丝剥茧，抓住核心逻辑。简单来说，defineStore 主要做了以下几件事：

生成 store 的唯一标识符 (id)：也就是你在 defineStore 中传入的第一个参数 'counter'。这个 id 在 Pinia 内部用于追踪和管理所有的 store。
创建 useStore 函数： defineStore 返回一个 useStore 函数，这个函数才是真正用来获取 store 实例的。
处理 state、getters 和 actions： defineStore 会根据你传入的配置对象，对 state、getters 和 actions 进行处理，并将它们转换为 Pinia 内部需要的格式。
利用 Vue 3 的 reactive API 创建响应式的 state：这是我们今天重点关注的部分。 Pinia 会使用 reactive 函数将 state 对象转换为一个响应式对象，这样当 state 中的数据发生变化时，所有依赖于这些数据的组件都会自动更新。

2. `useStore` 函数：获取 `store` 实例的入口

当你调用 useCounterStore() 时，实际上是在调用 defineStore 返回的 useStore 函数。这个函数负责从 Pinia 实例中获取对应的 store 实例。如果 store 实例不存在，useStore 函数会创建一个新的 store 实例。

useStore 的内部实现大致如下：

function useStore() {
  // 1. 从 Pinia 实例中获取 store
  const pinia = usePinia() // 假设 usePinia 是一个获取 Pinia 实例的函数

  // 2. 如果 store 已经存在，直接返回
  if (pinia._s.has(id)) {
    return pinia._s.get(id)
  }

  // 3. 创建新的 store 实例
  const store = createStore(id, options, pinia)

  // 4. 将 store 实例存储到 Pinia 实例中
  pinia._s.set(id, store)

  // 5. 返回 store 实例
  return store
}

这段代码的关键在于 createStore 函数，它负责创建 store 实例并初始化 state、getters 和 actions。

3. `createStore` 函数：`store` 实例的制造者

createStore 函数是 store 实例的制造者。它接收 store 的 id、配置对象 (options) 和 Pinia 实例作为参数，并返回一个新的 store 实例。

createStore 的内部实现比较复杂，但我们可以将其分解为以下几个步骤：

初始化 state： createStore 会调用用户定义的 state 函数，获取初始的 state 对象。然后，它会使用 Vue 3 的 reactive API 将 state 对象转换为一个响应式对象。
处理 getters： createStore 会遍历用户定义的 getters，并将它们转换为计算属性 (computed properties)。计算属性会自动追踪依赖的 state 属性，并在 state 属性发生变化时自动更新。
处理 actions： createStore 会遍历用户定义的 actions，并将它们绑定到 store 实例上。在 actions 中，你可以直接访问和修改 state 属性。
创建 store 实例： createStore 会创建一个包含 state、getters 和 actions 的 store 实例，并将其返回。

下面是一个简化版的 createStore 函数的实现：

import { reactive, computed } from 'vue'

function createStore(id, options, pinia) {
  const { state: stateFactory, getters, actions } = options

  // 1. 初始化 state
  const state = reactive(stateFactory ? stateFactory() : {})

  // 2. 处理 getters
  const computedGetters = {}
  for (const key in getters) {
    const getter = getters[key]
    computedGetters[key] = computed(() => getter(state))
  }

  // 3. 处理 actions
  const boundActions = {}
  for (const key in actions) {
    const action = actions[key]
    boundActions[key] = action.bind(null) // 绑定 this 到 store 实例 (将在下面实现)
  }

  // 4. 创建 store 实例
  const store = {
    $id: id,
    $state: state,
    ...computedGetters,
    ...boundActions,
  }

  // 5. 绑定 actions 的 this 到 store 实例
  for (const key in boundActions) {
    boundActions[key] = boundActions[key].bind(store)
  }

  return store
}

关键点： reactive(stateFactory ? stateFactory() : {})

这行代码是让 state 具有响应性的关键。 reactive 函数会将 stateFactory() 返回的普通 JavaScript 对象转换为一个响应式对象。这意味着，当 state 对象中的任何属性发生变化时，Vue 3 的响应式系统会自动通知所有依赖于这些属性的组件，并触发组件的重新渲染。

4. `reactive` API：让数据“活”起来

Vue 3 的 reactive API 是一个强大的工具，它可以将一个普通 JavaScript 对象转换为一个响应式对象。当响应式对象中的属性发生变化时，Vue 3 会自动追踪这些变化，并通知所有依赖于这些属性的组件。

reactive 的基本用法如下：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
})

console.log(state.count) // 0

state.count++ // 修改 state.count 的值

// 当 state.count 的值发生变化时，所有依赖于 state.count 的组件都会自动更新

reactive 函数的内部实现比较复杂，但我们可以将其简化为以下几个步骤：

创建一个 Proxy 对象： reactive 函数会创建一个 Proxy 对象，用于拦截对原始对象的访问和修改。
追踪依赖：当访问响应式对象的属性时，Proxy 对象会将当前组件添加到该属性的依赖列表中。
触发更新：当修改响应式对象的属性时，Proxy 对象会通知所有依赖于该属性的组件，并触发组件的重新渲染。

5. `store` 实例的结构：一个响应式的百宝箱

现在，我们已经了解了 store 实例的创建过程，让我们来看看 store 实例的结构：

const store = {
  $id: 'counter', // store 的唯一标识符
  $state: { count: 0 }, // 响应式的 state 对象
  doubleCount: 0, // 计算属性 (getter)
  increment: () => { // action
    this.count++
  },
}

store 实例包含以下属性：

$id: store 的唯一标识符。
$state: 响应式的 state 对象。它是通过 reactive API 创建的，因此当 state 中的数据发生变化时，所有依赖于这些数据的组件都会自动更新。
getters: 计算属性。它们会自动追踪依赖的 state 属性，并在 state 属性发生变化时自动更新。
actions: 用于修改 state 的函数。在 actions 中，你可以直接访问和修改 state 属性。

6. 总结：Pinia 的响应式魔法

让我们回顾一下今天的内容：

步骤	描述
`defineStore`	定义 `store` 的基本结构，包括 id, state, getters, actions。返回一个 `useStore` 函数。
`useStore`	用于获取 `store` 实例。如果 `store` 实例不存在，则调用 `createStore` 创建一个新的 `store` 实例。
`createStore`	创建 `store` 实例的核心函数。它接收 `store` 的 id、配置对象和 Pinia 实例作为参数，并返回一个新的 `store` 实例。关键在于使用 `reactive` API 将 `state` 对象转换为一个响应式对象。
`reactive`	Vue 3 的 API，可以将一个普通 JavaScript 对象转换为一个响应式对象。当响应式对象中的属性发生变化时，Vue 3 会自动追踪这些变化，并通知所有依赖于这些属性的组件。
`store` 实例	包含 `$id`、`$state`、`getters` 和 `actions` 属性。 `$state` 是一个响应式的 `state` 对象，`getters` 是计算属性，`actions` 是用于修改 `state` 的函数。

Pinia 利用 Vue 3 的 reactive API，将 store 的 state 对象转换为一个响应式对象，从而实现了数据的自动追踪和更新。这使得我们可以轻松地构建复杂的状态管理方案，而无需手动管理数据的依赖关系。

希望今天的讲解能够帮助你更深入地理解 Pinia 的源码和响应式原理。记住，理解源码是提升编程技能的关键！

感谢各位的聆听，下次再见！

Pinia 源码解剖：store 实例的炼成术，以及 reactive 的妙用

1. 从 defineStore 开始：store 定义的起点

2. useStore 函数：获取 store 实例的入口

3. createStore 函数：store 实例的制造者

4. reactive API：让数据“活”起来

5. store 实例的结构：一个响应式的百宝箱