Favoriten, die bleiben

In der Lektion Berechnete Werte und Watcher hast du die Bestellung mit watch in localStorage gespeichert und beim Start der App wieder gelesen. Die App in dieser Übung lässt den Kunden Einträge mit einem Stern als Favoriten markieren, und ihr watch speichert sie schon. Es fehlt das Lesen, auf dieselbe Weise, gleich wenn der Ref erstellt wird:

const gespeichert = localStorage.getItem("favoriten");
const favoriten = ref(gespeichert === null ? [] : JSON.parse(gespeichert));

Wie zuvor bedeutet null von getItem(), dass noch nichts gespeichert wurde, und der Kunde beginnt mit einem leeren Array.

Aber diese App lädt auch ihre Speisekarte, in onMounted. Warum liest du die Favoriten nicht auch dort? Weil localStorage sofort antwortet, während fetch() auf den Server warten muss. Es gibt keinen Grund zu warten, also lies sie oben im <script setup>: Wenn Vue die Seite zum ersten Mal zeigt, sind die Sterne schon richtig.

Wenn diese App startet, kommen ihre Daten aus drei Quellen, zu drei Zeitpunkten:

• was im Browser gespeichert ist: sofort, wenn die Komponente erstellt wird,
• die Datei menue.json: einen Moment, nachdem die Komponente eingehängt wurde,
• der Kunde: immer, wenn er klickt.

Ein berechneter Wert aus Daten von zwei Quellen ist zu jedem Zeitpunkt richtig. Die Namen der Favoriten, aus menue und favoriten gemacht, sind zuerst leer, obwohl die IDs schon da sind, und erscheinen, wenn die Speisekarte ankommt, ohne zusätzlichen Code.

Typische Fehler:

• JSON.parse() ohne die Prüfung auf null: JSON.parse(null) ergibt null, und wenn die Vorlage favoriten.includes(…) liest, endet die Seite mit TypeError: Cannot read properties of null (reading 'includes'). Bei dir funktioniert es, weil du etwas gespeichert hast, und bei jedem neuen Kunden schlägt es fehl.
• Speichern vor dem Lesen: Beginnt der Ref mit [] und ein watch mit { immediate: true } speichert ihn sofort, werden die gespeicherten Favoriten durch ein leeres Array ersetzt, bevor sie jemand gelesen hat.