什么是持久化存储
持久化存储是指将数据存储在非易失性介质中，以保证数据在系统重启或断电后仍能保持不变。这种存储方式确保数据持久存储并且可靠地被读取和访问，
简答来说：就是防止丢失，长期存储
为什么要用持久化存储
Pinia是和Vue3搭配的状态管理库，相对应的Vue2一般搭配Vuex。由于Pinia和Vuex中的state数据都是存储在内存中的，一刷新页面，state数据就会丢失，所以需要将数据持久化才能保证数据不丢失。例如存储到本地存储、Cookie等
安装
本项目使用的pinia做持久化存储
需要安装pinia和pinia的持久化
npm install pinia
yarn yarn add pinia
# npm npm install pinia-plugin-persist
# yarn yarn add pinia-plugin-persist
# pnpm pnpm add pinia-plugin-persist
配置pinia和持久化插件
- 创建pinia实例，并导出（store/index.js）
- 使用持久化插件
import { createPinia } from 'pinia'// pinia持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'// 创建pinia实例
const pinia = createPinia()
// 使用持久化插件
pinia.use(piniaPluginPersistedstate)// export * from，将所有按需导出的默认，再次全部按需导出
// 用户信息
export * from "./modules/user"export default pinia使用
defineStore函数的第三个参数中，重写持久化插件的存取方法，转调给UniApp提供的本地存储方法（默认使用的是localStorage，微信小程序中不支持，所以需要重写存取方法，调用UniApp的存取方法，来达到跨端）
import {defineStore,
} from 'pinia';
import {ref,
} from 'vue';// 创建聊天室仓库
const chatRoomStore = defineStore('chatroom',() => {// 定义聊天室const chatRoom = ref();// 储存聊天室// 保存会员信息，登录时使用const setchatRoom = (val) => {chatRoom.value = val;};// 清理会员信息，退出时使用const clearchatRoom = () => {chatRoom.value = undefined;};return {chatRoom,setchatRoom,clearchatRoom,};},// 重要：模块必须开启持久化，才会持久化！！！// 注意：默认持久化，只在H5端有效，因为默认使用的是localStorage，小程序端不能使用这个API，所以需要重写存取方法，转调给UniApp的持久化方法// 网页端配置// persist: true,// 小程序端配置{persist: {storage: {getItem(key) {return uni.getStorageSync(key);},setItem(key, value) {uni.setStorageSync(key, value);},},},}
);// 暴露用户小仓库
export default chatRoomStore;配置pinia到vue实例中（main.js）
import {createSSRApp
} from "vue";import App from "./App.vue";// 导入pinia
import pinia from "@/store";export function createApp() {const app = createSSRApp(App);// 使用pinaapp.use(pinia)return {app,};
}
