Pinia 持久化插件
pinia 和 vuex 都有一个通病 页面刷新状态会丢失,所以写一个 pinia 插件缓存他的值
const __piniaKey = '__PINIAKEY__'
type Options = {
key?: string
}
type OptPinia = Partial<Options>
const setStorage = (key: string, value: any): void => {
localStorage.setItem(key, JSON.stringify(value))
}
const getStorage = (key: string) => {
return (localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {})
}
const piniaPlugin = (options: OptPinia) => {
return (context: PiniaPluginContext) => {
const { store } = context;
const data = getStorage(`${options?.key ?? __piniaKey}-${store.$id}`)
store.$subscribe(() => {
setStorage(`${options?.key ?? __piniaKey}-${store.$id}`, toRaw(store.$state));
})
return {
...data
}
}
}
const pinia = createPinia()
pinia.use(piniaPlugin({
key: "pinia"
}))
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: Pinia 简单介绍
下一篇: 彻底找到 Tomcat 启动速度慢的元凶
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论