Änderungen innerhalb eines Arrays

Die App des Cafés soll sich auch die ganze Bestellung merken, damit ein Neuladen sie nicht verliert. Ein Array kommt wie im JavaScript-Kurs als JSON-Text in den localStorage, also könnte das ein Watcher wie der für den Namen erledigen:

watch(bestellung, (wert) => {
    localStorage.setItem("bestellung", JSON.stringify(wert));
});

Aber dieser Watcher läuft nie. Der Watcher eines Refs läuft, wenn sein .value etwas Neues bekommt, wie bei bestellung.value = []. push() legt kein neues Array in bestellung.value; es ändert das, das schon dort ist. Genauso inBestellung.anzahl++, das ein Objekt im Array ändert. Die Seite zeigt diese Änderungen, aber ein Watcher sieht nicht ins Array hinein, wenn du ihn nicht darum bittest. Du bittest ihn mit einem dritten Argument, den Optionen, { deep: true }:

watch(
    bestellung,
    (wert) => {
        localStorage.setItem("bestellung", JSON.stringify(wert));
    },
    { deep: true },
);

Es ist derselbe Aufruf, watch(bestellung, Funktion, Optionen), nur mit jedem Argument in einer eigenen Zeile: So schreibt man einen Aufruf meistens, wenn die Funktion nicht sein letztes Argument ist. Jetzt führt Vue die Funktion nach jeder Änderung im Array aus, und auch in den Objekten darin.

Wenn die App startet, liest sie die Bestellung mit JSON.parse() wieder ein, und wenn nichts gespeichert ist, beginnt sie mit einem leeren Array:

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

Typische Fehler:

• { deep: true } vergessen. Nichts wird gespeichert, und kein Fehler sagt, warum.
• Speichern ohne JSON.stringify(). Im localStorage steht dann [object Object], und wenn die App startet, endet JSON.parse() mit einem SyntaxError.