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

大家好！今天咱们来聊聊 Pinia 里面的 store 实例，看看它怎么像个魔法师一样，让咱们的 state 变得活蹦乱跳，响应灵敏。重点是，我们要深入源码，看看 Pinia 是怎么利用 Vue 3 的 reactive API 来实现这个魔术的。准备好了吗？Let’s dive in!

开场：Pinia Store 的诞生记

首先，我们得搞清楚，Pinia 的 store 到底是个什么东西？简单来说，它就是一个容器，用来存放我们的数据（state）、修改数据的方法（actions）以及基于数据计算的属性（getters）。有了 store，咱们就可以在整个应用中共享和管理数据，避免了组件之间传来传去，搞得一团糟。

创建 store 的过程，就像是给咱们的数据找了个好住处，并且装上了各种机关，让它们能够响应变化，自动更新。这个过程的核心，就在于 Pinia 如何使用 Vue 3 的 reactive API。

核心：reactive API 的魔法

Vue 3 的 reactive API 是实现响应式数据的关键。它就像一个“监听器”，能够监听到数据的变化，并且通知所有依赖于这些数据的组件进行更新。

reactive 的基本用法很简单：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello!'
});

console.log(state.count); // 0

state.count++; // 修改数据

// 此时，所有使用 state.count 的组件都会自动更新

在这个例子中，state 对象就变成了响应式的。当我们修改 state.count 的值时，所有使用了 state.count 的组件都会自动更新。这就是 reactive 的魔法！

源码剖析：Pinia 如何使用 reactive

现在，让我们深入 Pinia 的源码，看看它是如何使用 reactive API 来创建响应式的 store 的。

Pinia 内部的 defineStore 函数（简化版）大致长这样：

import { reactive, computed, effectScope, toRefs } from 'vue';

function defineStore(id, optionsOrFn, setup) {
  let idOption, options;
  if (typeof id === 'string') {
    idOption = id
    options = typeof optionsOrFn === 'function' ? {state: optionsOrFn} : optionsOrFn
  }

  const { state, getters, actions } = options;

  // 1. 创建 effectScope
  const scope = effectScope()

  function useStore() {
    // 2. 创建响应式的 state
    const reactiveState = scope.run(() => reactive(typeof state === 'function' ? state() : state || {}))

    // 3. 创建 getters
    const computedGetters = {}
    if (getters) {
      for (const getterName in getters) {
        computedGetters[getterName] = computed(() => getters[getterName].call(store))
      }
    }

    // 4. 创建 actions
    const boundActions = {}
    if (actions) {
      for (const actionName in actions) {
        boundActions[actionName] = actions[actionName].bind(store)
      }
    }

    const store = {
      $id: idOption,
      $state: reactiveState, // 暴露响应式 state
      ...reactiveState, // 展开 state
      ...computedGetters,
      ...boundActions,
      $reset: () => {
        const newState = typeof state === 'function' ? state() : state || {}
        // Object.assign(reactiveState, newState)  用这个方法无法触发响应式
        for (const key in reactiveState) {
          reactiveState[key] = newState[key]
        }
        for (const key in newState) {
          if (!(key in reactiveState)) {
            reactiveState[key] = newState[key]
          }
        }
      }
    }

    return store
  }

  return useStore;
}

export { defineStore };

让我们一步步分析：

defineStore 函数： 这是创建 store 的入口函数。它接收 id（store 的唯一标识符）和 options（包含 state、getters 和 actions）作为参数。
reactive(state())： 这是关键的一步！Pinia 使用 reactive API 将 state 对象转换成响应式的。如果 state 是一个函数，Pinia 会先执行这个函数，获取初始的 state 对象，然后再进行 reactive 处理。
effectScope(): Pinia 使用 effectScope 来管理 store 的生命周期，以及将 store 中的所有响应式副作用绑定到这个 scope 上。当 scope 被停用时，所有副作用都会被停止。
computed(getters[getterName].call(store))： Pinia 使用 computed 来创建基于 state 的计算属性。computed 具有缓存功能，只有当依赖的 state 发生变化时，才会重新计算。并且将getter的this绑定到store实例。
actions[actionName].bind(store)： Pinia 将 actions 绑定到 store 实例上，这样在 actions 内部就可以访问 store 的 state 和 getters。
store 对象： 最终，Pinia 将 reactiveState、computedGetters 和 boundActions 组合成一个 store 对象，并返回。
$reset 方法： 提供了一个重置 store 的方法。它将 state 重置为初始值。需要注意的是，直接使用Object.assign进行赋值并不能触发响应式。

重点：为什么 reactive 这么重要？

如果没有 reactive API，我们就需要手动监听数据的变化，并且手动更新组件。这不仅代码量大，而且容易出错。有了 reactive，我们只需要关注数据的修改，Vue 3 会自动处理剩下的事情。

代码示例：一个简单的 Pinia Store

让我们来看一个简单的 Pinia store 的例子：

import { defineStore } from 'pinia';

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

在这个例子中：

state：包含一个 count 属性，初始值为 0。
getters：包含一个 doubleCount 计算属性，返回 count 的两倍。
actions：包含 increment 和 decrement 两个方法，分别用于增加和减少 count 的值。

当我们使用 useCounterStore 时，就可以访问到响应式的 count 属性、doubleCount 计算属性以及 increment 和 decrement 方法。

<template>
  <p>Count: {{ count }}</p>
  <p>Double Count: {{ doubleCount }}</p>
  <button @click="increment">Increment</button>
  <button @click="decrement">Decrement</button>
</template>

<script setup>
import { useCounterStore } from './store';

const counterStore = useCounterStore();
const { count, doubleCount, increment, decrement } = counterStore;
</script>

在这个例子中，当 count 的值发生变化时，Count: {{ count }} 和 Double Count: {{ doubleCount }} 都会自动更新。这就是 reactive 的威力！

深入：toRefs 的作用

在上面的例子中，我们使用了 toRefs 将 store 的 state 转换成 refs。这是因为在 <script setup> 语法糖中，我们需要使用 refs 才能在模板中访问响应式数据。

toRefs 的作用是将一个响应式对象的所有属性转换成 refs。例如：

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello!'
});

const { count, message } = toRefs(state);

console.log(count.value); // 0

count.value++; // 修改数据

// 此时，state.count 和 count.value 都会更新

在这个例子中，count 和 message 都变成了 refs。当我们修改 count.value 的值时，state.count 的值也会同步更新。

表格总结：Pinia Store 的核心组成部分

组件	功能	实现方式
`state`	存储数据	`reactive` API
`getters`	基于 `state` 计算的属性	`computed` API
`actions`	修改 `state` 的方法	`bind` API (绑定到 `store` 实例)
`$reset`	重置 `state` 为初始值	循环赋值
`effectScope`	管理store的生命周期以及store中的所有响应式副作用绑定到这个scope上。	`effectScope` API

进阶：$subscribe 和 $onAction

Pinia 还提供了 $subscribe 和 $onAction 两个 API，用于监听 state 的变化和 actions 的执行。

$subscribe： 用于监听 state 的变化。它接收一个回调函数作为参数，当 state 发生变化时，回调函数会被执行。
$onAction： 用于监听 actions 的执行。它接收一个回调函数作为参数，当 actions 被执行时，回调函数会被执行。

这两个 API 可以用来实现一些高级的功能，例如：

记录 state 的变化日志
在 actions 执行前后执行一些额外的操作
实现撤销/重做功能

总结：Pinia Store 的魔法

Pinia 的 store 实例之所以能够如此强大，离不开 Vue 3 的 reactive API 的支持。reactive API 让 state 变得响应式，使得组件能够自动更新，从而简化了开发流程，提高了开发效率。

通过深入源码，我们可以看到 Pinia 如何巧妙地利用 reactive API，以及如何将 state、getters 和 actions 组合成一个功能完善的 store 对象。

希望今天的讲座能够帮助大家更好地理解 Pinia 的 store 实例，以及它背后的响应式原理。下次再见！

发表回复 取消回复

发表回复取消回复