Vue3 + Pinia persistent storage

1 Introduction

• This article uses Piniaand plug-ins pinia-plugin-persistfor persistent storage, avoiding the need to manually modify the storage after modifying the store
• This article deprecates the plug-in pinia-plugin-persistedstate, which cannot configure variables in a store to be stored in localStorage and sessionStorage respectively

2 persistent storage

2.1 Installation dependencies

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

2.2 Add new store file

• Add store folder
• Add index.ts file under store folder

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 Modify the main.ts file

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 Persistent storage test

• Add a modules folder under the store folder
• Add a new user.ts file under the modules folder

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

If it does not take effect, you need to check whether multiple Pinias are registered globally (global search createPinia)

For example, the main.ts file re-registers 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 Advanced configuration

3.1 Store all variables

Stored in sessionStorage by default, the key is the id of the store

persist: {
    
    
  enabled: true
}

Stored in localStorage, the key is the id of the store

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

Custom storage key value

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

3.2 Store some variables

Stored in sessionStorage by default

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

Custom storage to localStorage

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

Custom storage to sessionStorage and localStorage

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