Vue3 + Pinia 持久化存储

文章目录

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 文件

importtype{ App }from'vue'import{ createPinia }from'pinia'import piniaPluginPersist from'pinia-plugin-persist'const store =createPinia()
store.use(piniaPluginPersist)exportfunctionsetupStore(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,}})exportdefault 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']}]}