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++
})
})