Ein Ref, der sich selbst speichert

Das Speichern in localStorage braucht immer dieselben Zeilen: lesen, was gespeichert ist, wenn der Ref erstellt wird, und es mit watch speichern, wenn er sich ändert. Mit einem Composable schreibst du sie nur einmal:

import { ref, watch } from "vue";

export function useLocalStorage(schluessel, anfangswert) {
    const gespeichert = localStorage.getItem(schluessel);
    const wert = ref(gespeichert === null ? anfangswert : JSON.parse(gespeichert));

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

    return wert;
}

Dann braucht jeder Wert, der bleiben soll, eine Zeile:

const name = useLocalStorage("name", "");
const bestellung = useLocalStorage("bestellung", []);

So funktioniert es:

• Das Composable hat zwei Parameter: schluessel, den Namen, unter dem es speichert, und anfangswert, den Wert, mit dem es beginnt, wenn noch nichts gespeichert wurde. Dank ihnen speichert dieselbe Funktion einen Namen unter "name" und eine Bestellung unter "bestellung".
• Es gibt einen einzelnen Ref zurück, kein Objekt, also gibt es nichts auseinanderzunehmen: Nach const name = useLocalStorage("name", ""); ist name ein Ref, bereit für v-model oder {{ name }}.
• Das watch darin gehört zum Aufruf: Jeder Aufruf beobachtet seinen eigenen Ref und speichert ihn unter seinem eigenen Schlüssel. { deep: true } steht da, damit auch ein push() in ein Array gespeichert wird, wie du aus Berechnete Werte und Watcher weißt.
• JSON.stringify() und JSON.parse() funktionieren auch für Text, Zahlen, true und false, also kann das Composable alles speichern.

Die Komponente sieht davon nichts. Sie arbeitet mit name und bestellung wie mit jedem anderen Ref, und sie speichern sich selbst.