Ukládání návyků

Odškrtněte pár návyků a klikněte znovu na Spustit. Všechno je jako na začátku: při každém otevření stránky začne aplikace od začátku a znovu načte soubor. Aplikace, která zapomene, co jste splnili, je k ničemu, a tak si návyky uloží do localStorage.

V lekci Composables jste si k tomu napsali composable useLocalStorage(klic, vychozi). Vrátí ref, stejně jako ref(), ale ten začíná tím, co je pod klíčem uložené (nebo hodnotou vychozi, když tam zatím nic není), a sledování ho při každé změně uloží. Patří do vlastního souboru useLocalStorage.js na třetí záložce:

import { ref, watch } from "vue";

export function useLocalStorage(klic, vychozi) {
    const ulozene = localStorage.getItem(klic);
    const hodnota = ref(ulozene === null ? vychozi : JSON.parse(ulozene));

    watch(
        hodnota,
        (novaHodnota) => {
            localStorage.setItem(klic, JSON.stringify(novaHodnota));
        },
        { deep: true },
    );

    return hodnota;
}

{ deep: true } je tu důležité: odškrtnutí návyku změní hotovo hluboko uvnitř pole, ne pole samotné, a bez něj by si toho sledování nevšimlo.

V App.vue teď navyky nevzniknou pomocí ref(), ale z composable, a uloží se pod klíčem "navyky". Zbytek kódu může zůstat, jak je, protože navyky jsou pořád ref s polem:

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

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

Když aplikace začne s uloženými návyky, nesmí přes ně načíst soubor. onMounted proto soubor načte, jen když žádné návyky nejsou: když se aplikace otevře poprvé, nebo když jste odebrali všechny a návrhy se vrátí.

onMounted(async () => {
    if (navyky.value.length === 0) {
        const odpoved = await fetch("navyky.json");
        if (!odpoved.ok) {
            chyba.value = "Návyky se nepodařilo načíst.";
        } else {
            navyky.value = await odpoved.json();
        }
    }
    nacitani.value = false;
});

Náhled si tu pamatuje, co stránka uloží, dokud na cvičení pracujete. Jakmile je něco uložené, ukáže konzole tlačítko Smazat uložená data, které stránku otevře znovu, jako by to bylo poprvé.