Pinia数据持久化及数据加密

01 持久化插件

推荐使用pinia-plugin-persistedstate，其他持久化插件很容易出现bug

• 安装

npm i pinia-plugin-persistedstate

• 在store/index下引用

import { createPinia, defineStore } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

export default store

• store模块中配置持久化选项

// 每一个存储的模块，命名规则use开头，store结尾
export const useAuthStore = defineStore('authId', {
  state: () => {
    return {
      num: 0
    }
  },
  getters: {
    doubleCount: (state) => state.num * 2
  },
  actions: {
    changeNum() {
      this.num++
    }
  },
  // 开启数据持久化缓存
  persist: true
})

persist接收 boolean | PersistedStateOptions | PersistedStateOptions[]

persist: {
    key: 'auth-key', //这个Store将被持久化存储在 localStorage 中的'auth-key' key 中。
    storage: localStorage // 或者sessionStorage,
    paths: ['num'] //需要持久化的数据，state中的某一个数据
    // 还有四个配置项serializer beforeRestore afterRestore debug不常用，可在官方文档学习
  }

插件官方文档

02 加密持久化数据

持久化的数据会在浏览器中被查看，这对公司业务相关的数据有极大的安全隐患。所用到的插件是secure-ls，这也是我之前总结的Vuex数据加密的方法。只是这一次没有相关参考，是我研究pinia-plugin-persistedstate源码总结出来的方法，过程比较艰辛，希望大家多多支持，欢迎一键三连！

• 源码提供的类型StorageLike ,通过引入类型来重定义getItem和setItem方法
  

import { createPinia, defineStore } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import type { StorageLike } from 'pinia-plugin-persistedstate'
import SecureLS from 'secure-ls'
// encryptionSecret:自定义密钥
const ls = new SecureLS({ isCompression: false, encryptionSecret: '38c31684-d00d-30dc-82e0-fad9eec46d1d' })

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

const st: StorageLike = {
  setItem(key: string, value: string) {
    ls.set(key, value)
  },
  getItem(key: string): string | null {
    return ls.get(key)
  }
}

export const useAuthStore = defineStore('authId', {
  state: () => {
    return {
      num: 0
    }
  },
  getters: {},
  actions: {},
  // 开启数据持久化缓存
  persist: {
    storage: st // 上面申明的类型
  }
})

export default store

• 源码提供的类型StorageLike指向typescript中的Pick类型，所有也可直接定义Pick类型

const st: Pick<Storage, 'getItem' | 'setItem'> = {
  setItem(key: string, value: string) {
    ls.set(key, value)
  },
  getItem(key: string): string | null {
    return ls.get(key)
  }
}

export const useAuthStore = defineStore('authId', {
  state: () => {},
  getters: {},
  actions: {},
  // 开启数据持久化缓存
  persist: {
    storage: st
  }
})

这里需要注意的是，在Vue组件中引用store实例，一定要store.$patch来修改数据，不然浏览器的存储中看不到持久化的数据。
还有一个存在的问题是：SecureLS这个数据加密插件默认把数据存在localStorage，所以有需要存在sessionStorage的需求，该方法就不太灵活了。

import { useAuthStore } from '@/store'
import { storeToRefs } from 'pinia'
const authStore = useAuthStore()

onMounted(() => {
  authStore.$patch((state) => {
    state.value++
  })
})