|
pinia 和 vuex 都有一个通病 页面刷新状态会丢失
我们可以写一个pinia 插件缓存他的值
视频教程?Vue3 + vite + Ts + pinia + 实战 + 源码_哔哩哔哩_bilibili
const __piniaKey = '__PINIAKEY__'
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 {
...store.$state,
...data
}
}
}
const pinia = createPinia()
pinia.use(piniaPlugin({
key: "pinia"
}))
|