Pinia

Vuex4 匹配 Vue3；Vuex3 匹配 Vue2。
Vuex3 推荐搭配 Vue2 使用；Vuex4 推荐搭配 Vue2 和 Vue3 的 Options API 使用；Pinia 推荐搭配 Vue3 的 Composition API 使用。

Pinia： 也是 Vue 官方维护的一个状态管理库，用于跨组件、页面进行状态共享。

Pinia 和 Vuex 的区别：

Pinia 原本是 Vue 官方对 Vuex5 的一个实验性版本，不过完善之后官方就将其直接推出了，而不再去发布 Vuex5。

1. 在 Pinia 中，mutations 不再存在。
2. 在 Pinia 中，不再有 modules 的模块嵌套。
   
3. 相比于 Vuex，Pinia 对 Composition API 有更友好的适配。
4. 相比于 Vuex，Pinia 对 TypeScript 有更友好的支持。

安装：

npm install pinia。

创建并注册 Pinia 对象：

// src/stores/index.js
// 1. 创建 Pinia 对象
import { createPinia } from "pinia"
const pinia = createPinia()
export default pinia

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './store'

const app = createApp(App)
// 2. 注册 pinia 对象，此时 Piani 就生效了
app.use(pinia)
app.mount('#app')

定义并获取 Store：

通过 defineStore() 定义 store。defineStore() 接收两个参数&#