Wie erstelle ich einen dauerhaften Zustand für Pinia + Quasar?

Ich verwende Pinia für die Zustandsverwaltung und möchte, dass der Zustand bestehen bleibt, wenn die Seite neu geladen wird.

Mir sind zwei Möglichkeiten bekannt:

Verwenden Sie ein Plugin. Vuex hat dafür ein vuex-persistedstate- Plugin und Pinia hat ein ähnliches Plugin, aber es befindet sich noch in der Entwicklung.

Verwenden Sie lokalen Speicher. Glücklicherweise hat Quasar ein LocalStorage-Plugin, das hier gut zu verwenden wäre. Aber ich bin mir nicht sicher, wie ich es mit Pinia integrieren soll, daher der Grund für diesen Beitrag.

Ich habe ein nettes Tutorial gefunden, das etwas Ähnliches mit Pinia + Vueuse macht.

Und ich habe versucht, es mit Pinia + TypeScript + Quasar LocalStorage Plugin wie unten beschrieben an meine Bedürfnisse anzupassen:

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;
 },
 },
});

Leider funktioniert es nicht.

Der Status bleibt bei der Seitenaktualisierung nicht erhalten.

Irgendwelche Ideen, wie das funktioniert?

Lösung des Problems

userUm den Zustand mit lokalen Speicherdaten zu initialisieren, verwenden Sie Quasar's LocalStorage.getItem()und verwenden Sie standardmäßig ein leeres Objekt:

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

Rufen Sie in der setUserAktion auf, LocalStorage.set()um die Benutzerdaten im lokalen Speicher zu speichern.

Da useres sich um ein Objekt handelt, klonen Sie das Objekt, anstatt es direkt zuzuweisen, damit der Speicher nicht unnötigerweise einen Verweis auf externe Objekte behält. Wenn userDataverschachtelte Eigenschaften vorhanden sind, können Sie Quasar's verwenden extend, um das Objekt tief zu kopieren:

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
 },
 }
})

Demo