如何为皮尼娅+类星体创造持久状态？

Question

我正在使用Pinia进行州管理，并且希望在重新创建页面时状态保持不变。

我知道有两个选择：

1. 使用插件。Vuex有一个vuex-persistedstate插件，而Pinia有类似的插件，但是它还在开发中。
2. 使用本地存储。幸运的是，类星体有一个LocalStorage插件，这将是很好的使用这里。但我不知道如何将它与皮尼亚整合，因此这篇文章的原因。

我发现一个不错的教程与Pinia + 沃尤斯做类似的事情。

我试着用Pinia + TypeScript +类星体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状态，请使用类星体的LocalStorage.getItem()，默认为空对象：

export const useUserStore = defineStore('user', {
  state: () => ({
    user: (LocalStorage.getItem('user') || {}) as CreateMutable<User>,
  }),
  ⋮

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

由于user是一个对象，所以克隆对象而不是直接分配对象，这样存储库就不会不必要地保留对外部对象的引用。如果userData具有嵌套属性，则可以使用类星体的extend深度复制对象：

import { extend, LocalStorage } from 'quasar'

export const useUserStore = defineStore('user', {
  ⋮
  actions: {
    setUser(userData: User) {
      const copyOfData = { ...userData }
      // or...
      const copyOfData = extend(true /* deep */, {}, userData)

      LocalStorage.set('user', copyOfData)
      this.user = copyOfData
    },
  }
})

演示

Answer 2

我实际上使用的是“香草localStorage”，对此我没有问题。我不太喜欢很多库，也不喜欢简单的任务(尽管我不喜欢将它们用于复杂的任务)。不管怎样，我也是VueUse的粉丝。这个函数我还没有使用过，但是我可以使用imagine.it使事情变得更简单。

香草localStorage

设置成本地存储器

localStorage.setItem("myStorageKey", "My persisted values");

从本地存储

localStorage.getItem("myStorageKey");

状态突变

除此之外，我还没有试图让localStoreage直接进入这个州。对我来说，这似乎是一个危险的信号，因为你通常不应该直接变异一种状态。但在这件事上我不确定。我通常预先填充硬编码数据(或只是空的)的状态，然后编写一个操作，将数据设置为状态。

Answer 3

在Pinia获得官方的类星体支持之前，就已经创建了quasar-v2-ssr-pinia存储库。我试图在pinia-plugin-persist和pinia-plugin-persistedstate中添加这个公关，但是这些Pinia插件不适用于类星体SSR，所以Toby使用Quasar‘Cookies、SessionStorage和LocalStorage采用者提供了一个持久化状态示例。

好消息:它起作用了，您可以在任何商店使用任何存储采用器。

坏消息:没有部分存储持久，只有整个商店。我们可以创建单独的存储来保存其所有内容，作为解决办法。

我计划将Toby的代码发布到NPM，以安装它，而不是从示例中复制。