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 環境下使用時需要特別處理