pinia持久化存储插件pinia-plugin-persist
-
文档地址:https://seb-l.github.io/pinia-plugin-persist/basic-usage.html
有时候需要把pinia中的数据持久化存储(存到localstorage或sessionstorage中)
pinia-plugin-persist插件可以帮我们轻松的做到:
插件安装:
npm i pinia --save
npm i pinia-plugin-persist --save
main.js中装载插件
import { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' import piniaPersist from 'pinia-plugin-persist' const app = createApp(App); const pinia = createPinia(); pinia.use(piniaPersist); app.use(store) .use(pinia) .mount('#app')
存储策略
整个仓库存储
import { defineStore } from 'pinia' export const useUserStore = defineStore('storeUser', { state: () => { return { firstName: 'S', lastName: 'L', accessToken: 'xxxxxxxxxxxxx' } }, actions: { setToken (value: string) { this.accessToken = value } }, persist: { enabled: true , // 这个配置代表存储生效,而且是整个store都存储 } })
指定字段存储,并且指定存储方式:
// store/use-user-store.ts export const useUserStore = defineStore('storeUser', { state () { return { firstName: 'S', lastName: 'L', accessToken: 'xxxxxxxxxxxxx', } }, persist: { enabled: true, strategies: [ { storage: sessionStorage, paths: ['firstName', 'lastName'] }, // firstName 和 lastName字段用sessionStorage存储 { storage: localStorage, paths: ['accessToken'] }, // accessToken字段用 localstorage存储 ], }, })
-
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2019-07-24 electron-vue搭建项目