关于uniapp + Pinia持久化的操作🎈🎈🎈

Uniapp默认不支持Pinia的持久化，或者说需要自己实现，因为直接用Vue3的插件来写的话并不能缓存起来，那既然有本地存储，为啥还要Pinia来缓存呢？

用Pinia的原因：

1. 方便管理状态
2. 方便跨组件共享状态
3. 方便状态持久化
4. 方便状态的类型推导
5. 方便状态的调试和测试
6. 方便状态的迁移和升级
7. 方便状态的扩展和封装

localStorage 存储在浏览器的本地存储中，它是浏览器提供的一种客户端存储数据的机制。存储在 localStorage 中的数据会一直保存在用户的浏览器中，即使用户关闭了浏览器或者重新加载页面，数据也不会丢失。

Pinia 则是存储在 Vue.js 应用程序的状态管理库。它将状态存储在 Vue 应用程序的内存中，而不是存储在浏览器的本地存储中。因此，Pinia 存储的数据只在当前用户会话中有效，一旦用户关闭了浏览器，数据就会丢失。

下载pinia-plugin-piniastorage插件

• 使用Pinia的持久化，需要先安装npm i pinia-plugin-piniastorage插件

注册(main.js)

• import { createApp } from 'vue';

• import App from './App.vue';

• import { createPinia } from 'pinia';

• import { piniaStorage } from "pinia-plugin-piniastorage";

• const store = createPinia();

• store.use(piniaStorage());

• createApp(App).use(router).use(store).mount('#app');

基本使用

• 在pinia中导入，storeOptions是配置持久化的

• 在页面中使用

• 缓存成功