如何为 Pinia + Quasar 创建持久状态？

Question

我使用 Pinia 进行状态管理，并且我希望刷新页面时状态保持不变。

我知道有两个选择：

1. 使用插件。Vuex 有一个vuex-persistedstate插件，Pinia 有一个类似的插件，但仍在开发中。

2. 使用本地存储。幸运的是，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;
    },
  },
});

不幸的是它不起作用。

该状态不会在页面刷新时持续存在。

关于如何实现这项工作有什么想法吗？

Answer 1

要user使用本地存储数据初始化状态，请使用 Quasar's LocalStorage.getItem()，并默认为空对象：

\n

export const useUserStore = defineStore(\'user\', {\n  state: () => ({\n    user: (LocalStorage.getItem(\'user\') || {}) as CreateMutable<User>,\n  }),\n  \xe2\x8b\xae\n

\n

在setUser行动中，调用LocalStorage.set()将用户数据保存到本地存储。

\n

由于user是一个对象，因此克隆该对象而不是直接分配它，这样存储就不会不必要地保留对外部对象的引用。如果userData有嵌套属性，您可以使用 Quasarextend来深度复制对象：

\n

import { extend, LocalStorage } from \'quasar\'\n\nexport const useUserStore = defineStore(\'user\', {\n  \xe2\x8b\xae\n  actions: {\n    setUser(userData: User) {\n      const copyOfData = { ...userData }\n      // or...\n      const copyOfData = extend(true /* deep */, {}, userData)\n\n      LocalStorage.set(\'user\', copyOfData)\n      this.user = copyOfData\n    },\n  }\n})\n

\n

演示

\n