【实战】23.Pinia 状态管理

状态管理

状态管理是指将应用的状态（数据）抽离出来，以一个全局的单例对象的形式存储在内存中，通过对这个对象的操作来改变应用的状态，从而达到多个组件之间共享状态的目的。

在 Vue 中，我们可以通过 props 和 emit 来实现父子组件之间的通信，通过 provide 和 inject 来实现祖先组件和后代组件之间的通信，通过 vuex 来实现多个组件之间的通信。

但是，这些通信方式都有一个共同的问题，那就是通信的复杂度随着组件的嵌套层级越来越深而增加，这样就会导致代码的可维护性变差，而且在大型项目中，这种通信方式会导致代码的可读性变差，从而导致项目的维护成本变高。

什么是 Pinia

Pinia 是一个 Vue 3 的状态管理库，它的 API 设计参考了 Vuex，但是它的实现方式和 Vuex 不同，它是基于 Proxy 的，而 Vuex 是基于 Vue 的响应式系统的。

Pinia 的优点：

1. Pinia 是一个轻量级的状态管理库，它的 API 设计非常简洁，使用起来非常方便。
2. Pinia 支持 TypeScript，使用 TypeScript 编写的项目可以获得更好的类型支持。
3. Pinia 支持多个 store，可以将不同的状态分离到不同的 store 中，方便管理。
4. Pinia 支持插件，可以通过插件扩展 Pinia 的功能。

Pinia 的基本使用

首先确保你已经安装并在 main.ts 中引入了 Pin