Vue 3源码极客之：`Vue`的`Pinia`：`Store`的精简设计和`Vue 3`响应式系统的深度融合。

各位观众老爷，大家好！我是你们的老朋友，BUG终结者。今天咱们聊点硬核的，扒一扒Vue 3生态里炙手可热的状态管理库——Pinia，重点关注它的Store设计和与Vue 3响应式系统的深度融合。

开场白：告别Vuex，拥抱Pinia的怀抱

话说当年，Vuex在Vue 2时代那是扛把子，项目大了不用它，状态管理就跟一团乱麻似的。但Vuex用起来也有点小麻烦，比如mutation、action那一套，写起来有点繁琐，而且类型推断也不太友好。

Vue 3横空出世，响应式系统焕然一新，Pinia也应运而生。Pinia这玩意儿，设计理念简单粗暴：抛弃了mutation，拥抱composition API，拥抱TypeScript，拥抱更好的开发体验。

第一部分：Pinia Store的精简设计

Pinia的Store，可以用一句话概括：就是个响应式的对象。没了mutation那些弯弯绕，直接修改state，响应式系统自动更新视图。这感觉，倍儿爽！

先来看看一个最简单的Store定义：

import { defineStore } from 'pinia';

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

• defineStore： 这是Pinia的核心API，用来定义Store。第一个参数是Store的唯一ID，建议全局唯一，方便调试。第二个参数是个配置对象，包含state、getters和actions。
• state： 必须是一个函数，返回一个对象。这个对象就是Store的状态，里面的属性都是响应式的。
• getters： 相当于计算属性，根据state派生出新的值。注意，getter函数接收state作为参数。
• actions： 用来修改state的地方。可以直接修改this上的属性，Pinia会帮你处理响应式更新。

再看一个更复杂的例子，涉及异步操作：

import { defineStore } from 'pinia';
import axios from 'axios';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    loading: false,
    error: null,
  }),
  getters: {
    userName: (state) => state.user?.name || 'Guest',
  },
  actions: {
    async fetchUser(userId: number) {
      this.loading = true;
      this.error = null;
      try {
        const response = await axios.get(`/api/users/${userId}`);
        this.user = response.data;
      } catch (error: any) {
        this.error = error.message;
      } finally {
        this.loading = false;
      }
    },
    clearUser() {
      this.user = null;
    },
  },
});

这个例子展示了如何处理异步请求，以及如何在actions中更新多个state。this的指向非常明确，就是当前Store实例。

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

Pinia之所以如此丝滑，离不开Vue 3强大的响应式系统。Pinia利用了reactive、ref等API，将Store的状态变成响应式的。

2.1 reactive 和 ref 的妙用

在state函数中，Pinia会用reactive或者ref来包装你的数据。如果你的数据是一个对象，Pinia会用reactive；如果你的数据是一个基本类型，Pinia会用ref。

例如，上面的useCounterStore中，count会被ref包装，而user会被reactive包装。这意味着，当你修改count的值时，所有依赖于count的组件都会自动更新。

2.2 toRefs：解构的艺术

在组件中使用Store时，通常需要解构Store的状态。但是，直接解构会导致失去响应式。Pinia提供了toRefs API，可以解决这个问题。

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

<script setup lang="ts">
import { useCounterStore } from './stores/counter';
import { toRefs } from 'vue';

const counterStore = useCounterStore();
const { count, doubleCount } = toRefs(counterStore);
const { increment } = counterStore; // actions可以直接解构

</script>

toRefs会将Store对象中的每个属性转换成一个ref对象。这样，即使你解构了count，它仍然是响应式的。当你修改count的值时，组件仍然会更新。

2.3 $patch：批量更新的利器

有时候，你需要一次性更新多个state。Pinia提供了$patch方法，可以方便地批量更新state。

const userStore = useUserStore();

userStore.$patch({
  user: {
    name: 'New Name',
    age: 30,
  },
  loading: false,
});

$patch接收一个对象作为参数，对象的key是state的属性名，value是要更新的值。Pinia会智能地合并对象，并触发响应式更新。

$patch 还可以接收一个函数，提供更灵活的更新方式：

userStore.$patch((state) => {
    if (state.user) {
        state.user.age++;
        state.user.name = 'Old ' + state.user.name;
    }
});

2.4 $reset：一键还原

如果你想把Store的状态恢复到初始值，可以使用$reset方法。

const counterStore = useCounterStore();

counterStore.$reset(); // 重置count为0

$reset方法会将Store的状态恢复到state函数返回的初始值。

第三部分：高级用法与最佳实践

3.1 Store的组合与复用

Pinia支持Store的组合，可以将多个Store组合成一个更大的Store。这对于大型项目来说非常有用。

// store/auth.ts
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false,
    token: null,
  }),
  actions: {
    login(token: string) {
      this.isLoggedIn = true;
      this.token = token;
    },
    logout() {
      this.isLoggedIn = false;
      this.token = null;
    },
  },
});

// store/user.ts
import { defineStore } from 'pinia';
import { useAuthStore } from './auth';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
  }),
  actions: {
    async fetchUserInfo() {
      const authStore = useAuthStore();
      if (authStore.isLoggedIn) {
        // ...fetch user info using authStore.token
      }
    },
  },
});

在这个例子中，useUserStore使用了useAuthStore，实现了Store的组合。

3.2 TypeScript的加持

Pinia对TypeScript的支持非常友好。你可以为Store的状态、getters和actions定义类型，从而获得更好的类型推断和代码提示。

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserState {
  user: User | null;
  loading: boolean;
  error: string | null;
}

export const useUserStore = defineStore<'user', UserState>('user', {
  state: () => ({
    user: null,
    loading: false,
    error: null,
  }),
  getters: {
    userName: (state) => state.user?.name || 'Guest',
  },
  actions: {
    async fetchUser(userId: number) {
      // ...
    },
  },
});

3.3 插件的使用

Pinia支持插件，可以扩展Store的功能。例如，你可以使用pinia-plugin-persist插件，将Store的状态持久化到本地存储。

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

//main.js or main.ts
app.use(pinia)

然后在你的store里配置 persist: true 就可以持久化state

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Eduardo',
    age: 20,
  }),
  persist: true,
})

第四部分：Pinia vs. Vuex：一场友好的竞赛

特性	Pinia	Vuex
API	更加简洁，使用defineStore定义Store，直接修改state。	较为繁琐，需要定义mutation、action等。
TypeScript支持	原生支持TypeScript，类型推断更友好。	需要额外配置才能获得较好的TypeScript支持。
Composition API	完全拥抱Composition API，与Vue 3无缝集成。	兼容Options API和Composition API，但与Composition API的集成不如Pinia自然。
Mutataions	没有Mutations，直接修改 state, 更加直观	需要通过Mutations 修改 state, 流程更复杂
学习曲线	相对简单，易于上手。	相对复杂，需要理解mutation、action等概念。
Bundle Size	体积更小，对性能影响更小。	体积相对较大，对性能有一定影响。

总结：Pinia，Vue 3状态管理的最佳搭档

Pinia凭借其精简的设计、与Vue 3响应式系统的深度融合，以及对TypeScript的良好支持，成为了Vue 3状态管理的首选方案。它不仅简化了开发流程，提高了开发效率，还提供了更好的类型安全性和可维护性。

如果你正在使用Vue 3，或者计划迁移到Vue 3，那么Pinia绝对值得你尝试。

结尾：留下你的疑问，共同进步

今天的分享就到这里。希望对大家有所帮助。如果大家对Pinia还有什么疑问，欢迎在评论区留言，我会尽力解答。让我们一起学习，共同进步！