Vue3 + Pinia 持久化存储

Vue3 + Pinia 持久化存储 文章目录1 前言2 持久化存储2.1 安装依赖2.2 新增 store 文件2.3 修改 main.ts 文件2.4 持久化存储测试3 高级配置3.1 存储所有变量3.2 存储部分变量1 前言本文使用 Pinia 及插件 pinia-plugin-persist 做持久化存储，避免修改 store 后还需要手动修改 storage本文弃用插件 pinia-plugin-persistedstate，该插件无法配置一个 store 中的变量分别存储于 localStorage 和 sessionStorage2 持久化存储2.1 安装依赖pnpm i pinia // 安装 piniapnpm 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

推荐整理分享Vue3 + Pinia 持久化存储，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

若不生效，需检查全局是否注册多个 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'] } ]}