pinia-plugin-persistedstate的使用

pinia持久化存储的使用

安装

npm install pinia-plugin-persistedstate

 注册

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)export default pinia

 使用

添加persist选项

import { defineStore } from 'pinia'export const useAuthStore = defineStore('auth', {state: () => ({token: '',userInfo: null,}),actions: {// ...你的 actions},persist: true, // 启用持久化
})

 

高级用法

1. 部分状态持久化

typescript

复制

下载

persist: {paths: ['token', 'userInfo.name'], // 只持久化 token 和 userInfo 的 name 属性
}

2. 自定义序列化

typescript

复制

下载

persist: {serializer: {serialize: JSON.stringify,deserialize: JSON.parse,},
}

3. 使用 sessionStorage

typescript

复制

下载

persist: {storage: sessionStorage,
}

4. 使用 Cookie

首先安装 js-cookie：

bash

复制

下载

npm install js-cookie

然后在配置中使用：

typescript

复制

下载

import Cookies from 'js-cookie'persist: {storage: {getItem: (key) => Cookies.get(key),setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),removeItem: (key) => Cookies.remove(key),},
}

全局默认配置

你可以在插件安装时设置全局默认配置：

typescript

复制

下载

pinia.use(piniaPluginPersistedstate, {storage: sessionStorage,beforeRestore: (ctx) => {console.log(`即将恢复 ${ctx.store.$id}`)},
})

TypeScript 支持

为了获得完整的 TypeScript 支持，你可以在 tsconfig.json 中添加：

json

复制

下载

{"compilerOptions": {"types": ["pinia-plugin-persistedstate"]}
}

注意事项

1. 持久化大量数据可能会影响性能，建议只持久化必要的数据

2. 敏感信息（如 token）应考虑加密存储

3. 不同浏览器对 localStorage 的大小限制不同（通常约 5MB）

4. 在 SSR 环境下使用时需要特别处理