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"]} }注意事项
持久化大量数据可能会影响性能，建议只持久化必要的数据
敏感信息（如 token）应考虑加密存储
不同浏览器对 localStorage 的大小限制不同（通常约 5MB）
在 SSR 环境下使用时需要特别处理