vue3 pinia持久化加密处理

所需依赖

1. pinia-plugin-persistedstate
2. encrypt-storage

以上两个依赖的npm库中也有相关的使用介绍

encrypt-storage需特别注意，加密生效需要添加stateManagementUse的处理

#安装实现持久化的插件
npm install pinia-plugin-persistedstate

#安装实现加密处理的依赖
npm install encrypt-storage

main.js文件

import { createApp } from 'vue'
import { createPinia } from 'pinia'

//导入持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)
app.use(pinia)

import App from './App.vue'

app.mount('#app')

在单独的store文件中使用

import { defineStore } from 'pinia'
import { EncryptStorage } from 'encrypt-storage'

//需注意使用stateManagementUse
export const encryptStorage = new EncryptStorage('至少10个字符的加密key', {
  stateManagementUse: true
})

const baseUrl = import.meta.env.VITE_APP_BASE_URL

export const useBaseStore = defineStore('base', {
  state: () => ({
    baseURL: baseUrl,
    orderKey:'其他'
  }),
  persist: {
    enabled: true,
    // key: 'base',//如果需要对存储的密钥key进行命名
    storage: encryptStorage,
   // storage: localStorage, //如果不使用加密处理
    paths: ['baseURL','orderKey']
  },

  actions: {},
  getters: {}
})