Gewohnheiten speichern

Hake ein paar Gewohnheiten ab und klicke noch einmal auf Ausführen. Alles ist wie am Anfang: Jedes Mal, wenn sich die Seite öffnet, startet die App von vorn und lädt die Datei neu. Ein Tracker, der vergisst, was du erledigt hast, nützt nichts, also speichert er die Gewohnheiten in localStorage.

In der Lektion Composables hast du dafür ein Composable geschrieben, useLocalStorage(schluessel, startwert). Es gibt ein Ref zurück, wie ref() es tut, aber das Ref beginnt mit dem, was unter dem Schlüssel gespeichert ist (oder mit startwert, wenn noch nichts gespeichert wurde), und ein Watcher speichert es bei jeder Änderung. Es steht in einer eigenen Datei, useLocalStorage.js, im dritten Tab:

import { ref, watch } from "vue";

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

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

    return wert;
}

{ deep: true } ist hier wichtig: Eine Gewohnheit abzuhaken ändert ein erledigt tief im Array, nicht das Array selbst, und ohne die Option würde der Watcher es nicht bemerken.

In App.vue kommt gewohnheiten jetzt aus dem Composable statt aus ref(), gespeichert unter dem Schlüssel "gewohnheiten". Der Rest des Codes kann bleiben, wie er ist, weil gewohnheiten weiterhin ein Ref mit einem Array ist:

import { useLocalStorage } from "./useLocalStorage.js";

const gewohnheiten = useLocalStorage("gewohnheiten", []);

Startet die App mit gespeicherten Gewohnheiten, darf sie die Datei nicht darüberladen. Also lädt onMounted die Datei nur, wenn es keine Gewohnheiten gibt: beim ersten Öffnen der App oder nachdem du alle entfernt hast, wenn die Vorschläge zurückkommen.

onMounted(async () => {
    if (gewohnheiten.value.length === 0) {
        const antwort = await fetch("gewohnheiten.json");
        if (!antwort.ok) {
            fehler.value = "Die Gewohnheiten konnten nicht geladen werden.";
        } else {
            gewohnheiten.value = await antwort.json();
        }
    }
    laedt.value = false;
});

Hier behält die Vorschau, was die Seite speichert, während du an der Übung arbeitest. Sobald etwas gespeichert ist, zeigt die Konsole einen Button Gespeicherte Daten löschen, der die Seite wieder so öffnet wie beim ersten Mal.