vue中使用pinia（状态管理）

pinia 是状态管理工具，但是它与传统的状态管理工具（如 Vuex）不同，它采用了官方推荐的官方状态管理工具 ，它可以与Vuex共存。

Vuex和Pinia都是Vue.js的状态管理工具，它们的目标相似，但有一些不同之处。

1. 由官方支持：Vuex由Vue.js官方支持，而Pinia是由Vue.js社区开发的。
2. Mutation vs Action：Vuex强制要求使用Mutation来更新状态，而Pinia则更加灵活，允许使用Action来更新状态。
3. Action Commit：在Vuex中，通过Commit方法触发Mutation来更新状态，而在Pinia中，可以直接调用Action来更新状态。
4. Store结构：Vuex的Store结构更加复杂，需要定义State、Mutations、Actions等，而Pinia的Store结构更加简单，只需要定义State和Action。
5. API：Vuex提供了更多的API，比如MapState、MapGetters、MapActions等，而Pinia的API相对较少。
6. 性能：Pinia的性能比Vuex更好，因为它没有Vuex的复杂结构和额外的API。

总体而言，如果你需要一个由官方支持的状态管理工具，并且需要严格的状态更新机制，可以选择Vuex；如果你需要一个更灵活的状态管理工具，并且不需要官方支持，可以选择Pinia。

pinia配置项相关介绍：

defineStore('标识(唯一值)',store配置项）

state: 用于数据初始化定义的对象

actions: 用于处理数据的修改方法可以放在actions里

getters: 是一组用于从store中检索数据的函数 > 类似计算属性

pinia组件内使用的API介绍：

storeToRefs()

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()

$reset()

你可以通过调用 store 的 $reset() 方法将 state 重置为初始值

$subscribe()

state中有$subscribe()方法侦听state值的变化

第一个参数中有mutations和state

第二个参数是一个对象{ detached: true }，在组件销毁后依然监听状态的改变

$onAction()

你可以通过 store.$onAction() 来监听 action 和它们的结果。传递给它的回调函数会在 action 本身之前执行。after 表示在 promise 解决之后，允许你在 action 解决后执行一个一个回调函数。同样地，onError 允许你在 action 抛出错误或 reject 时执行一个回调函数。

安装命令：npm i pinia

我当前使用的是 "pinia": "^2.1.6"版本

持久化插件库： 安装命令：npm i
pinia-plugin-persistedstate

版本："
pinia-plugin-persistedstate": "^3.2.0"

为什么用到（持久化插件库）> 解决刷新页面数据丢失问题。

main.ts文件：

import { createApp } from 'vue'
import App from '@/App.vue'
// 引入路由
import router from '@/router'
import { createPinia } from 'pinia'
// 持久化插件
import piniaPluginPersist from