uniapp使用数据持久化存储

什么是持久化存储

持久化存储是指将数据存储在非易失性介质中，以保证数据在系统重启或断电后仍能保持不变。这种存储方式确保数据持久存储并且可靠地被读取和访问，

简答来说：就是防止丢失，长期存储

为什么要用持久化存储

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);
    // 使用pina
    app.use(pinia)
    return {
        app,
    };
}