位置: IT常识 - 正文
Vue3 + Pinia 持久化存储
编辑：rootadminVue3 + 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
本文链接地址:https://www.jiuchutong.com/zhishi/295941.html
转载请保留说明！
推荐整理分享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'] } ]}上一篇：iframe框架一个页面中嵌套到另外一个页面(如何进行iframe框架切换)
下一篇：通过云服务器租用GPU进行基于YOLOV5的人体检测模型训练(通过云服务器租号安全吗)
