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 修改 main.ts 文件

import { createApp } from 'vue'
import App from './App.vue'
import { setupStore } from './store'
import router from './router/routes'
import { createPinia } from 'pinia' // 引入 pinia
import piniaPluginPersist from 'pinia-plugin-persist' // 引入插件

const app = createApp(App)
app.use(createPinia().use(piniaPluginPersist)) // 使用插件
app.use(router).mount('#app')

2.3 持久化存储测试

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

3 高级配置

3.1 存储所有变量

默认存储到 sessionStorage ，key 为 store 的 id（即"user"）

persist: {
  enabled: true
}

存储到 localStorage ，key 为 store 的 id（即"user"）

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'] }
  ]
}

4 其他

4.1 store 为 setup 写法

export const useAppStore = defineStore(
  'app',
  () => {
    const loading = ref(false)
    const setLoading = (data: boolean) => (loading.value = data)
    return { loading, setLoading }
  },
  {
    persist: { // 在 defineStore 的第三个参数配置 persist
      enabled: true
    }
  }
)

4.2 引入 pinia-plugin-persist 报错

Could not find a declaration file for module ‘pinia-plugin-persist’.

在 tsconfig.app.json 或 tsconfig.json 文件的compilerOptions对象中设置"moduleResolution": “node”