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