小洛的前端技术博客Appearance
使用 pinia-plugin-persistedstate 实现 Vue 3 状态持久化
使用 Pinia 管理状态时，页面刷新会导致状态丢失。为了持久化关键数据（如用户登录状态、主题配置等），可以通过 pinia-plugin-persistedstate 插件将状态保存到浏览器的 localStorage 或 sessionStorage 中
通过 npm 或 yarn 安装插件：
bash
npm install pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstatenpm install pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate在项目的入口文件（如 main.js 或 main.ts）中注册插件
js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
createApp(App).use(pinia).mount('#app')import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
createApp(App).use(pinia).mount('#app')定义持久化的 Store
在 Store 中通过 persist 配置项定义需要持久化的字段：
js
// stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
roles: [],
theme: 'light',
}),
persist: {
storage: localStorage, // 使用 localStorage
paths: ['token', 'roles'], // 仅持久化 token 和 roles
key: 'user-store', // 自定义存储键名（可选）
},
})// stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
roles: [],
theme: 'light',
}),
persist: {
storage: localStorage, // 使用 localStorage
paths: ['token', 'roles'], // 仅持久化 token 和 roles
key: 'user-store', // 自定义存储键名（可选）
},
})验证持久化
在组件中修改状态后，检查浏览器的存储
vue
<template>
<div>
<button @click="updateToken">更新 Token</button>
</div>
</template>
<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const updateToken = () => {
userStore.token = 'new_token_123'
console.log('Token 已更新，查看 localStorage:', localStorage.getItem('user-store'))
}
</script><template>
<div>
<button @click="updateToken">更新 Token</button>
</div>
</template>
<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const updateToken = () => {
userStore.token = 'new_token_123'
console.log('Token 已更新，查看 localStorage:', localStorage.getItem('user-store'))
}
</script>使用 Cookie
js
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)
}
}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)
}
}