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

各位观众老爷，大家好！今天咱们来聊聊 Pinia 源码里那点儿“响应式小心思”。重点剖析 store 实例的诞生过程，以及它如何“勾搭”上 Vue 3 的 reactive API，让 state 变得“一呼百应”。

咱们的目标是：把 Pinia 的“响应式魔术”扒个精光，让大家以后用 Pinia 的时候，心里更有底儿！

第一幕：Pinia Store 的“投胎”过程

要理解 Pinia 的响应式，首先得知道 store 实例是怎么创建出来的。Pinia 的 defineStore 函数，就是“造娃”的工厂。

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

interface State {
  count: number;
  name: string;
}

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

defineStore 接受一个唯一的 ID (这里是 ‘counter’) 和一个配置对象。这个配置对象里包含了 state、getters 和 actions。state 是一个函数，返回初始状态；getters 是一些派生状态；actions 是一些修改状态的方法。

现在，让我们深入 defineStore 的源码，看看它到底干了些啥：

import { createPinia, setActivePinia } from './createPinia'
import { isVue2 } from 'vue-demi'
import { computed, effectScope, isRef, reactive, ref, unref, watch } from 'vue'

export function defineStore<
  Id extends string,
  S extends StateTree,
  G extends _GettersTree<S>,
  A extends _ActionsTree
>(
  id: Id,
  options: DefineStoreOptions<Id, S, G, A>
): StoreDefinition<Id, S, G, A>
export function defineStore<
  Id extends string,
  S extends StateTree,
  G extends _GettersTree<S>,
  A extends _ActionsTree = {}
>(
  id: Id,
  setup: () => DefineStoreOptions<Id, S, G, A>
): StoreDefinition<Id, S, G, A>

export function defineStore<Id extends string, S extends StateTree, G extends _GettersTree<S>, A extends _ActionsTree>(
  id: Id,
  optionsOrSetup:
    | DefineStoreOptions<Id, S, G, A>
    | (() => DefineStoreOptions<Id, S, G, A>)
): StoreDefinition<Id, S, G, A> {
  let options: DefineStoreOptions<Id, S, G, A>
  const isSetupStore = typeof optionsOrSetup === 'function'

  if (isSetupStore) {
    options = optionsOrSetup()
  } else {
    options = optionsOrSetup
  }

  const { state, getters, actions } = options
  // ... 省略部分代码

  function useStore(pinia?: Pinia | null, hot?: StoreGeneric): Store<Id, S, G, A> {
    const currentPinia = pinia ?? getCurrentPinia()
    if (!currentPinia) {
      throw new Error(
        `[🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?n` +
          `tDid you forget to add `app.use(pinia)`?`
      )
    }

    pinia = currentPinia

    if (hot && pinia._hmrRootId) {
      hot._hmrRootId = pinia._hmrRootId
    }

    const idInPinia = '__stores__' in pinia ? id in pinia.__stores__ : false

    if (pinia && idInPinia) {
      return pinia.__stores__[id] as Store<Id, S, G, A>
    }

    const scope = effectScope(true)
    const store = scope.run(() => {
      let reactiveState: S
      if (state) {
        reactiveState = reactive(state ? state() : {}) as S
      } else {
        reactiveState = {} as S
      }

      // ... getters and actions processing

      const storeProperties: StoreProperties<Id, S, G, A> = {
        $id: id,
        $state: reactiveState, // 直接赋值 reactiveState
        // ... other properties and methods
      }

      const partialStore = {
        ...reactiveState,
        ...storeProperties,
      }

      return partialStore as Store<Id, S, G, A>
    })!

    // ... 省略部分代码

    return store as Store<Id, S, G, A>
  }

  useStore.$id = id

  return useStore
}

这段代码有点长，咱们提炼一下关键步骤：

参数解析：defineStore 接收 id 和 options（或一个返回 options 的函数）。
Store 工厂：defineStore 返回一个 useStore 函数。这个函数才是真正创建 store 实例的“工厂”。
检查 Pinia 实例：useStore 首先会检查是否已经存在一个激活的 Pinia 实例。
状态初始化：如果配置对象里有 state，useStore 就会调用 reactive(state()) 创建一个响应式的 state 对象。
组合 Store：最后，useStore 将响应式的 state 和其他的属性（如 $id, $state）组合在一起，返回一个 store 实例。

重点来了：reactive(state())！ 这就是 Pinia 让 state 具有响应性的关键所在。Vue 3 的 reactive API 会把一个普通的 JavaScript 对象转换成一个响应式对象。当这个响应式对象的属性发生变化时，所有依赖于这个属性的组件都会自动更新。

第二幕：reactive 的“点石成金”术

为了彻底搞懂 Pinia 的响应式原理，咱们得深入了解 Vue 3 的 reactive API。

reactive 的作用很简单：把一个普通对象变成“敏感”的，任何对它属性的修改都会被 Vue 的响应式系统追踪到。

import { reactive } from 'vue'

const raw = { count: 0 }
const reactiveState = reactive(raw)

console.log(raw === reactiveState) // false，reactive 返回的是一个代理对象

reactiveState.count++ // 触发响应式更新

在这个例子中，reactive(raw) 返回的是一个代理对象，而不是原始对象本身。这个代理对象会拦截所有对 count 属性的访问和修改，然后通知 Vue 的响应式系统进行更新。

reactive 的原理其实有点复杂，简单来说，它利用了 JavaScript 的 Proxy 对象。Proxy 可以拦截对象的操作，例如读取属性、设置属性、删除属性等等。reactive 会创建一个 Proxy 对象，并定义一些 handler 来拦截这些操作。当属性被访问或修改时，handler 就会通知 Vue 的响应式系统。

限制：

只能处理对象类型(Object, Array, Map, Set)。
对基本类型（String, Number, Boolean）无效。
修改响应式对象之外的值，不会触发更新。

第三幕：Pinia 如何“优雅地”使用 reactive

回到 Pinia 的源码，咱们看看 useStore 函数是如何使用 reactive 的：

function useStore(pinia?: Pinia | null, hot?: StoreGeneric): Store<Id, S, G, A> {
    // ...
    const scope = effectScope(true)
    const store = scope.run(() => {
      let reactiveState: S
      if (state) {
        reactiveState = reactive(state ? state() : {}) as S
      } else {
        reactiveState = {} as S
      }

      // ...

      const storeProperties: StoreProperties<Id, S, G, A> = {
        $id: id,
        $state: reactiveState, // 直接赋值 reactiveState
        // ... other properties and methods
      }

      const partialStore = {
        ...reactiveState,
        ...storeProperties,
      }

      return partialStore as Store<Id, S, G, A>
    })!

    // ...

    return store as Store<Id, S, G, A>
}

状态初始化：reactive(state ? state() : {}) 创建一个响应式的 state 对象。这里使用了三元运算符，如果 state 函数存在，就调用它并把返回值传给 reactive；否则，就创建一个空的响应式对象。
状态注入：storeProperties 中的 $state 属性直接指向这个响应式对象。
组合 Store：将响应式的 state 对象通过对象展开 (...reactiveState) 合并到 store 实例中。

这样，store 实例的 state 就具有了响应性。当 state 的属性发生变化时，所有使用这个 store 的组件都会自动更新。

第四幕：Getters 和 Actions 的“助攻”

光有响应式的 state 还不够，Pinia 还提供了 getters 和 actions 来更好地管理状态。

Getters：getters 类似于 Vue 组件的 computed 属性，它们可以根据 state 计算出一些派生状态。getters 也会被 reactive 处理，因此它们也是响应式的。当 state 发生变化时，getters 会自动重新计算。
Actions：actions 是一些修改 state 的方法。在 actions 中，可以直接通过 this 访问 store 实例。由于 state 是响应式的，所以在 actions 中修改 state 也会触发响应式更新。

让我们看一个例子：

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

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Pinia')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

在这个例子中，doubleCount 是一个 getter，它会根据 count 的值自动重新计算。increment 是一个 action，它可以修改 count 的值，从而触发 doubleCount 的重新计算。

第五幕：Pinia 的“响应式优化”

Pinia 在响应式方面做了一些优化，以提高性能：

$patch 方法：$patch 方法可以一次性修改多个 state 属性，从而减少响应式更新的次数。

const store = useCounterStore()

store.$patch({
  count: 10,
  name: 'New Pinia'
})

$reset 方法：$reset 方法可以将 state 重置为初始状态。

const store = useCounterStore()

store.$reset()

总结：Pinia 的响应式“套路”

Pinia 的响应式原理并不复杂，它主要依赖于 Vue 3 的 reactive API。

defineStore 创建 store 实例：defineStore 函数返回一个 useStore 函数，这个函数负责创建 store 实例。
reactive 赋予 state 响应性：useStore 函数使用 reactive(state()) 创建一个响应式的 state 对象。
getters 和 actions 辅助管理状态：getters 可以根据 state 计算出派生状态，actions 可以修改 state。
优化技巧：$patch 和 $reset 方法可以提高性能。

可以用一张表格来总结一下：

组件	作用
`defineStore`	定义一个 store，返回一个 `useStore` 函数。
`useStore`	创建 store 实例，使用 `reactive` API 使 `state` 具有响应性。
`reactive`	Vue 3 的 API，将一个普通 JavaScript 对象转换为响应式对象。
`state`	存储状态数据，通过 `reactive` 变为响应式。
`getters`	根据 `state` 计算派生状态，也会被 `reactive` 处理，具有响应性。
`actions`	修改 `state` 的方法，可以直接访问 `store` 实例。
`$patch`	一次性修改多个 `state` 属性，减少响应式更新的次数。
`$reset`	将 `state` 重置为初始状态。

通过今天的讲解，相信大家对 Pinia 的响应式原理有了更深入的了解。下次使用 Pinia 的时候，就可以更加自信地驾驭它了！

今天的“响应式解剖”就到这里，感谢各位的收看！咱们下期再见！

发表回复 取消回复

发表回复取消回复