vuex永久存储（Vue3 + Pinia 持久化存储）

时间2025-09-19 19:17:15分类IT科技浏览5581

导读：1 前言本文使用 Pinia 及插件 pinia-plugin-persist 做持久化存储，避免修改 store 后还需要手动修改 storage 本文弃用插件 pinia-plugin-persistedstate，该插件无法配置一个 store 中的变量分别存储...

1 前言

本文使用 Pinia 及插件 pinia-plugin-persist 做持久化存储，避免修改 store 后还需要手动修改 storage 本文弃用插件 pinia-plugin-persistedstate ，该插件无法配置一个 store 中的变量分别存储于 localStorage 和 sessionStorage

2 持久化存储

2.1 安装依赖

pnpm i pinia // 安装 pinia pnpm i pinia-plugin-persist // 安装持久化存储插件

2.2 新增 store 文件

新增 store 文件夹 store 文件夹下新增 index.ts 文件 import type { App } from vue import { createPinia } from pinia import piniaPluginPersist from pinia-plugin-persist const store = createPinia() store.use(piniaPluginPersist) export function setupStore(app: App<Element>) { app.use(store) } export { store }

2.3 修改 main.ts 文件

import { createApp } from vue import App from ./App.vue import { setupStore } from ./store import router from ./router/routes const app = createApp(App) setupStore(app) app.use(router).mount(#app)

2.4 持久化存储测试

store 文件夹下新增 modules 文件夹 modules 文件夹下新增 user.ts 文件 import { defineStore } from pinia const userStore = defineStore(user, { state: () => { return { accessToken: , userName: } }, actions: { SET_ACCESS_TOKEN(token: string) { this.accessToken = token }, SET_USER_NAME(name: string) { this.userName = name } }, persist: { enabled: true, } }) export default userStore

若不生效，需检查全局是否注册多个 Pinia （全局搜索createPinia）

比如 main.ts 文件重新注册了 Pinia

import { createApp } from vue import App from ./App.vue import { createPinia } from pinia import router from ./router/routes const pinia = createPinia() const app = createApp(App) app.use(pinia) app.use(router).mount(#app)

3 高级配置

3.1 存储所有变量

默认存储到 sessionStorage ，key 为 store 的 id

persist: { enabled: true }

存储到 localStorage ，key 为 store 的 id

persist: { enabled: true, strategies: [ { storage: localStorage, }, ] }

自定义存储 key 值

persist: { enabled: true, strategies: [ { key: piniaStore, storage: localStorage, }, ] }

3.2 存储部分变量

默认存储到 sessionStorage

persist: { enabled: true, strategies: [ { paths: [accessToken] }, ] }

自定义存储到 localStorage

persist: { enabled: true, strategies: [ { storage: localStorage, paths: [accessToken] }, ] }

自定义存储到 sessionStorage 和 localStorage

persist: { enabled: true, strategies: [ { storage: sessionStorage, paths: [userName] }, { storage: localStorage, paths: [accessToken] } ] }

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

展开全文READ MORE

傲软投屏怎么调整清晰度（傲软投屏电脑怎么放大界面，傲软投屏如何卸载）