Vue 3源码深度解析之：`Pinia`：`Store`的精简设计与`Vue 3`响应式系统的深度融合。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

咳咳，各位观众老爷们，晚上好！我是你们的老朋友，今天咱们不聊八卦，聊点硬核的——Vue 3 源码深度解析之 Pinia：Store 的精简设计与 Vue 3 响应式系统的深度融合。

Pinia，这玩意儿现在是 Vue.js 生态圈里炙手可热的状态管理库。它就像一个经过深度减肥的 Vuex，更轻量，更灵活，而且与 Vue 3 的响应式系统结合得那是相当丝滑。今天，咱就扒开它的源码，看看它到底是怎么做到“瘦身成功”的。

第一部分：Pinia 的“瘦身”秘诀

Pinia 的设计哲学可以用一个字概括：简。Vuex 复杂的 Module、Mutation、Action、Getter 这些概念，在 Pinia 里都被简化或者直接干掉了。

抛弃 Mutations：拥抱 Actions

Vuex 里，修改 state 必须通过 Mutations，然后再由 Actions 提交 Mutations。这中间绕了个弯，增加了代码量和复杂度。Pinia 直接砍掉了 Mutations，Actions 直接修改 state，简单粗暴，效果拔群。

// Vuex
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

// Pinia
import { defineStore } from 'pinia'

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

可以看到，Pinia 的 actions 方法可以直接通过 this 访问和修改 state，省去了 commit 的步骤。

精简 Module：拥抱 Composition API

Vuex 的 Module 机制可以把 store 分割成多个模块，但配置起来比较繁琐。Pinia 鼓励使用 Composition API 来组织 store 的逻辑，每个 store 都是一个独立的函数，可以自由组合。
```
// Vuex
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

// Pinia
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Counter')

  function increment() {
    count.value++
  }

  return { count, name, increment }
})
```
Pinia 的 store 本质上就是一个函数，返回一个包含 state、actions 和 getters 的对象。可以使用 ref 和 reactive 创建响应式数据，使用函数定义 actions。
取消 Getter 的“缓存”设定：

Pinia 不会像 Vuex 一样，对 Getter 进行深度监听，默认每次访问都重新计算，这意味着它更轻量，但开发者需要注意，避免在 Getter 中执行过于耗时的操作。如果确实需要缓存，可以使用 computed 来手动缓存。

第二部分：Pinia 与 Vue 3 响应式系统的深度融合

Pinia 能如此轻量和灵活，很大程度上得益于它与 Vue 3 响应式系统的深度融合。它充分利用了 ref、reactive、computed 这些 API，让 store 的数据和行为都具有响应式特性。

ref 和 reactive：打造响应式 State

Pinia 使用 ref 和 reactive 来定义 state。ref 用于创建基本类型的响应式数据，reactive 用于创建对象的响应式数据。
```
import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'

export const useUserStore = defineStore('user', () => {
  const name = ref('John Doe')
  const profile = reactive({
    age: 30,
    city: 'New York'
  })

  return { name, profile }
})
```
name 是一个 ref 对象，可以通过 name.value 访问和修改它的值。profile 是一个 reactive 对象，可以直接通过 profile.age 和 profile.city 访问和修改它的属性。
computed：实现响应式 Getters

Pinia 使用 computed 来定义 getters。computed 会根据依赖的 state 自动更新，并且具有缓存机制，可以避免重复计算。
```
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  return { count, doubleCount }
})
```
doubleCount 是一个 computed 对象，它的值会随着 count 的变化自动更新。

watch：监听 State 的变化

Pinia 允许使用 watch API 监听 state 的变化，并在变化时执行相应的操作。

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

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  watch(count, (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`)
  })

  return { count }
})

当 count 的值发生变化时，watch 函数会被调用，并打印出新旧值。

第三部分：Pinia 源码解析：defineStore 的奥秘

defineStore 是 Pinia 的核心 API，它负责创建 store。让我们深入源码，看看它是如何工作的。

// 简化后的 defineStore 函数
function defineStore(id: string, options: StoreDefinitionOptions): Store {
  const { state, actions, getters } = options;

  // 创建 store 的 state
  const storeState = reactive(state ? state() : {});

  // 创建 store 的 actions
  const storeActions = {};
  for (const actionName in actions) {
    storeActions[actionName] = actions[actionName].bind(storeState); // 绑定 this
  }

  // 创建 store 的 getters
  const storeGetters = {};
  for (const getterName in getters) {
    storeGetters[getterName] = computed(getters[getterName].bind(storeState)); // 绑定 this
  }

  // 返回 store 对象
  const store = reactive({
    $id: id,
    ...storeState,
    ...storeActions,
    ...storeGetters,
    $reset() {
      // 重置 state
      Object.assign(storeState, state ? state() : {});
    }
  });

  return store as Store;
}

这个简化版的 defineStore 函数做了以下几件事：

接收 id 和 options 参数：id 是 store 的唯一标识符，options 包含 state、actions 和 getters。
创建响应式 state：使用 reactive 函数将 state 对象转换为响应式对象。
创建 actions：遍历 actions 对象，将每个 action 函数绑定到 store 的 state 上，并添加到 storeActions 对象中。
创建 getters：遍历 getters 对象，使用 computed 函数将每个 getter 函数绑定到 store 的 state 上，并添加到 storeGetters 对象中。
创建 store 对象：使用 reactive 函数创建一个包含 id、state、actions 和 getters 的响应式对象。
返回 store 对象：返回创建好的 store 对象。

重点解析：this 的绑定

在 defineStore 函数中，actions 和 getters 函数都需要访问 state，因此需要将 this 绑定到 store 的 state 上。

storeActions[actionName] = actions[actionName].bind(storeState);
storeGetters[getterName] = computed(getters[getterName].bind(storeState));

bind(storeState) 的作用是将 actions 和 getters 函数的 this 指向 storeState，这样就可以在函数中通过 this 访问和修改 state 了。

第四部分：Pinia 的高级用法

除了基本的 state 管理，Pinia 还提供了一些高级用法，可以帮助我们更好地组织和管理 store。

插件 (Plugins)

Pinia 允许我们使用插件来扩展 store 的功能。插件本质上是一个函数，它接收 store 实例作为参数，并可以修改 store 的行为。
```
// 创建一个插件
function myPlugin(store) {
  store.$subscribe((mutation, state) => {
    console.log('State changed:', mutation, state)
  })
}

// 使用插件
import { createPinia } from 'pinia'

const pinia = createPinia()
pinia.use(myPlugin)
```
这个插件会监听 store 的 state 变化，并在变化时打印日志。

模块化 (Modular Stores)

虽然 Pinia 不像 Vuex 那样有明确的 Module 概念，但是我们可以使用 Composition API 来实现模块化的 store。

// userStore.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  const name = ref('John Doe')

  return { name }
})

// productStore.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useProductStore = defineStore('product', () => {
  const products = ref([])

  return { products }
})

我们可以将不同的 store 定义在不同的文件中，然后在组件中分别导入和使用它们。

服务端渲染 (SSR)

Pinia 可以很好地支持服务端渲染。在使用服务端渲染时，需要确保在每个请求中创建一个新的 Pinia 实例，以避免数据污染。

// 在服务端
import { createPinia } from 'pinia'
import { renderToString } from '@vue/server-renderer'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

renderToString(app).then((html) => {
  // 在 HTML 中注入 Pinia 的 state
  const state = pinia.state.value
  const script = `<script>window.__PINIA_STATE__ = ${JSON.stringify(state)}</script>`
  html = html.replace('</head>', `${script}</head>`)

  // 发送 HTML
})

// 在客户端
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

// 从 window 中获取 Pinia 的 state
if (window.__PINIA_STATE__) {
  pinia.state.value = window.__PINIA_STATE__
}

app.mount('#app')

在服务端渲染时，我们需要将 Pinia 的 state 序列化为 JSON 字符串，并注入到 HTML 中。在客户端，我们需要从 window 对象中获取 Pinia 的 state，并将其反序列化为 JavaScript 对象。

第五部分：Pinia 的优势与局限

优势：

轻量级：相比 Vuex，Pinia 更轻量，体积更小。
灵活：Pinia 更加灵活，可以使用 Composition API 自由组合 store 的逻辑。
类型安全：Pinia 使用 TypeScript 编写，提供了更好的类型安全。
易于学习：Pinia 的 API 更加简洁易懂，学习成本更低。
与 Vue 3 深度集成：Pinia 与 Vue 3 的响应式系统结合得非常紧密，可以充分利用 Vue 3 的特性。
支持插件机制: 可以通过插件扩展 store 的功能

局限：

生态系统不如 Vuex 完善: 毕竟 Vuex 存在的时间更长，积累的周边工具和社区资源也更多，Pinia 在这方面需要时间积累。
Getter 的缓存需要手动处理: 默认不进行缓存，需要开发者手动使用 computed 来进行缓存，这既是优点（更灵活）也是缺点（需要开发者自己注意）。
对于习惯 Vuex 风格的开发者，需要适应新的开发模式: 从 Vuex 迁移到 Pinia 需要一定的学习成本，需要适应 Composition API 的风格。

特性	Vuex	Pinia
架构	集中式，基于 Mutation、Action、Getter	基于 Composition API，更模块化
类型支持	需手动配置，相对复杂	原生支持 TypeScript，类型安全
体积	较大	较小，更轻量
学习曲线	较陡峭，概念较多	相对平缓，概念更少
模块化	Module 机制，配置繁琐	Composition API，灵活组合
异步操作处理	Action 中 commit Mutation	Action 直接修改 state
Getter 缓存	默认缓存	默认不缓存，需手动使用 `computed` 实现

总结：

Pinia 是一个非常优秀的 Vue.js 状态管理库，它以其轻量级、灵活性和与 Vue 3 响应式系统的深度融合而备受青睐。它的精简设计使其易于学习和使用，同时又提供了足够强大的功能来满足各种应用场景的需求。虽然它也有一些局限性，但瑕不掩瑜，Pinia 仍然是 Vue.js 开发者的一个非常值得推荐的选择。

好了，今天的 Pinia 源码解析就到这里。希望大家有所收获！如果觉得有用，记得点赞收藏加关注，咱们下期再见！

(悄悄说一句，源码分析这种事情，自己动手debug才是王道，光听讲没啥用，赶紧去clone一份Pinia源码跑起来吧！)

发表回复 取消回复

发表回复取消回复