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 环境下使用时需要特别处理