手把手教你使用Vue3指定状态管理库--Pinia

什么是 Pinia

Pinia 与 Vuex 一样，是作为 Vue 的“状态存储库”，用来实现 跨页面/组件 形式的数据状态共享。

在平时的开发过程中，Vue 组件之间可以通过 Props 和 Events 实现组件之间的消息传递，对于跨层级的组件也可以通过 EventBus 来实现通信。但是在大型项目中，通常需要在浏览器 保存多种数据和状态，而使用 Props/Events 或者 EventBus 是很难维护和扩展的。所以才有了 Vuex 和 Pinia。

Pinia 为何能取代 Vuex

作为 Vue 开发者都知道，Vuex 作为 Vue 的老牌官方状态库，已经和 Vue 一起存在了很长时间，为什么现在会被 Pinia 取代呢？

官方的说法主要是以下几点：

1.取消 mutations。因为在大部分开发者眼中，mutations 只支持 同步修改状态数据，而 actions 虽然支持 异步，却依然要在内部调用 mutations 去修改状态，无疑是非常繁琐和多余的
2.所有的代码都是 TypeScript 编写的，并且所有接口都尽可能的利用了 TypeScript 的 类型推断，而不像 Vuex 一样需要自定义 TS 的包装器来实现对 TypeScript 的支持
3.不像 Vuex 一样需要在实例/Vue原型上注入状态依赖，而是通过直接引入状态模块、调用 getter/actions 函数来完成状态的更新获取；并且因为自身对 TypeScript 的良好支持和类型推断，开发者可以享受很优秀的代码提示
4.不需要预先注册状态数据，默认情况下都是根据代码逻辑自动处理的；并且可以在使用中随时注册新的状态
5.没有 Vuex 的 modules 嵌套结构，所有状态都是扁平化管理的。也可以理解为 pinia 注册的状态都类似 vuex 的 module，只是 pinia 不需要统一的入口来注册所有状态模块
6.虽然是扁平化的结构，但是依然支持 每个状态之间的互相引用和嵌套
7.不需要 namespace 命名空间，得利于扁平化结构，每个状态在注册时即使没有声明状态模块名称，pinia 也会默认对它进行处理

总结一下就是：Pinia 在实现 Vuex 全局状态共享的功能前提下，改善了状态存储结构，优化了使用方式，简化了 API 设计与规范；并且基于 TypeScript 的类型推断，为开发者提供了良好的 TypeScript 支持与代码提示。

如何使用

至于 Pinia 在项目中的安装，大家应该都知道，直接通过包管理工具安装即可。

1. 注册 Pinia 实例

以 Vue 3 项目为例，只需要在入口文件 main.ts 中引入即可完成 Pinia 的注册。

import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia) 
1
2
3
4
5
6

当然，因为支持 createApp 支持 链式调用，所以也可以直接写成 createApp(App).use(createPinia()).mount('#app').

此时 createPinia() 创建的是一个根实例，在 app.use 的时候会在 app 中注入该实