vue3项目之持久化存储

pinia插件的方式,实现持久化存储

1. 创建插件: persistencePlugin.ts

import type { PiniaPluginContext } from 'pinia'
// 定义接口约束插件使用时需要传递的参数
interface PersistenceItem {
name: string,
stateList: string[]
}
const persistenceSet = (key: string, value: string) => {
localStorage.setItem(key, value)
}
const persistenceGet = (key: string) => {
return localStorage.getItem(key) ? localStorage.getItem(key) : ''
}
// 内层函数才是真正的插件,外层函数用于接收插件参数
export function persistencePlugin(persistenceList: PersistenceItem[]) {
// 持久化插件
return (context: PiniaPluginContext) => {
persistenceList.forEach(item => {
if (context.store.$id === item.name && item.stateList.length > 0) {
// 从本地存储中恢复数据
item.stateList.forEach(key => {
// 本地存储中没有该值初始化为''
context.store.$state[key] = persistenceGet(key)
})
// 符合条件开启存储
context.store.$subscribe((mutation) => {
// 只有userid 发生变化才会触发userid的本地存储变化
if (item.stateList.includes((<any>mutation.events).key)) {
const value = (<any>mutation.events).newValue
const valueType = typeof value
persistenceSet((<any>mutation.events).key, valueType === 'string' ? value : JSON.stringify(value))
}
})
}
})
}
}

2. main.ts 中使用插件

// ...
import { persistencePlugin } from './stores/plugins/persistencePlugin'
const app = createApp(App)
const pinia = createPinia()
pinia.use(persistencePlugin([{
name: 'user',
stateList: ['userid']
}]))
// ...

最后

以上就是彪壮蛋挞为你收集整理的vue3项目之持久化存储的全部内容，希望文章能够帮你解决vue3项目之持久化存储所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。