Vue3中pinia的使用 持久化处理

简单记录一下学习pinia的过程

1. Pinia是什么？

   Pinia 是一个基于 Vue 3 的状态管理库。 与 Vue 2 中的 Vuex 不同，Pinia 使用了 Vue 3 中的 Composition API，因此可以更好地支持 TypeScript 和更灵活的状态管理方式。

2. Pinia有什么特点？

• 简单并且易于使用，它的 API 设计是针对 Composition API 的，因此可以方便地使用 Vue 3 的新特性。
• 支持 TypeScript，并且提供了强类型的定义，可以在编译时捕获错误。
• 支持插件机制，可以轻松地扩展它的功能。
• 支持多个 store 实例，每个 store 实例都可以拥有自己的状态和行为。
• 支持持久化存储，可以将 store 中的数据保存在本地存储中，以便在页面刷新后仍然可以访问。

使用方法

1. 安装 pinia

yarn add pinia 
#或者使用 
npm npm install pinia

     2.在 main.ts/js文件里面进行配置

import { createApp } from 'vue' 
import { createPinia } from 'pinia' 
import App from './App.vue' 
import router from './router' 
import './assets/main.css' 
const app = createApp(App)  
const pinia = createPinia()  
app.use(pinia) 
app.use(router) 
app.mount('#app')

在main.ts/js文件内引入Pinia的createPinia()函数

import { c