Změny uvnitř pole

Aplikace kavárny si má pamatovat i celou objednávku, aby se po znovunačtení neztratila. Pole se do localStorage ukládá jako text v JSON, stejně jako v kurzu JavaScriptu, takže by to mohlo zvládnout sledování podobné tomu pro jméno:

watch(objednavka, (hodnota) => {
    localStorage.setItem("objednavka", JSON.stringify(hodnota));
});

Jenže toto sledování se nikdy nespustí. Sledování refu se spustí, když jeho .value dostane něco nového, třeba objednavka.value = []. push() ale do objednavka.value nové pole nedá, jen změní to, které tam už je. A stejně tak nalezena.pocet++ v pridejDoObjednavky(), které změní objekt uvnitř pole. Stránka tyto změny ukáže, ale sledování se dovnitř pole nedívá, dokud ho o to nepožádáte. Požádáte ho třetím argumentem, volbami { deep: true }:

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

Je to pořád watch(objednavka, funkce, volby), jen má každý argument vlastní řádek, jak se kód obvykle píše, když za funkcí následují další argumenty. Teď Vue funkci spustí po jakékoli změně uvnitř pole, i uvnitř objektů v něm.

Když se aplikace spustí, přečte si objednávku zpátky pomocí JSON.parse(), a když uložené nic není, začne s prázdným polem:

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

Typické chyby:

• Chybějící { deep: true }. Nic se neuloží a žádná chyba neřekne proč.
• Ukládání bez JSON.stringify(). V localStorage pak bude text [object Object],[object Object] a při spuštění aplikace skončí JSON.parse() chybou SyntaxError.