Vue3 Pinia 持久化存储

文章目录

• • 1 前言
  • 2 持久化存储
  • • 2.1 安装依赖
    • 2.2 修改 main.ts 文件
    • 2.3 持久化存储测试
  • 3 高级配置
  • • 3.1 存储所有变量
    • 3.2 存储部分变量
  • 4 其他
  • • 4.1 store 为 setup 写法
    • 4.2 引入 pinia-plugin-persist 报错

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”