我正在使用Pinia进行状态管理,希望页面刷新时保持状态。
我知道两种选择:
使用插件。Vuex有一个vuex-persistedstate插件可以实现这个功能,而Pinia也有类似的插件,但它仍在开发中。
使用本地存储。幸运的是,Quasar有一个LocalStorage插件,在这里使用它会很好。但是我不确定如何将其与Pinia集成,所以写下了这篇文章。
我找到了一篇不错的教程,介绍了如何使用Pinia + Vueuse实现类似的功能。
我尝试根据以下代码,使用Pinia + TypeScript + Quasar LocalStorage 插件来满足我的需求:
import { User } from 'firebase/auth';
import { defineStore } from 'pinia';
import { LocalStorage } from 'quasar';
type CreateMutable<T> = { -readonly [P in keyof T]: CreateMutable<T[P]> };
export const useUserStore = defineStore('user', {
state: () => ({
// user: {} as CreateMutable<User>, // This was my previous non-persistent state
user: LocalStorage.set('user', {}) as unknown as CreateMutable<User>, // This is my attempt at using LocalStorage persistent state
}),
actions: {
setUser(userData: User) {
this.user = userData;
},
setPhotoURL(photoURLData: string | null) {
this.user.photoURL = photoURLData;
},
},
});
很遗憾,它不起作用。
状态在页面刷新时不会保存。
有什么想法可以让它工作吗?