Sledování změn

Vypočítaná hodnota počítá hodnotu, kterou stránka ukáže. Někdy ale chcete, aby se při změně dat něco udělalo: třeba aby se data uložila, vypsala nebo někam poslala. Takovým věcem se říká vedlejší efekty a Vue pro ně má sledování (anglicky watcher), které vytvoříte pomocí watch():

import { ref, watch } from "vue";

const kategorie = ref("vše");

watch(kategorie, (novaHodnota, staraHodnota) => {
    console.log(`Teď se ukazuje: ${novaHodnota} (předtím: ${staraHodnota})`);
});

watch() dostane dva argumenty. První je to, co se má sledovat: ref nebo vypočítaná hodnota, bez .value. Druhý je funkce, kterou Vue spustí po každé změně, s novou a starou hodnotou. Když si zákazník vybere čaj, konzole ukáže:

Teď se ukazuje: čaj (předtím: vše)

Funkce nic nevrací, prostě udělá svou práci. A při spuštění aplikace neběží, jen po změně. Často potřebujete jen novou hodnotu, a pak starou vynecháte: (hodnota) => { … }.

Typický vedlejší efekt je ukládání do localStorage. V tomto cvičení zákazník napíše jméno pro objednávku a aplikace si ho má zapamatovat na příště. Sledování jméno po každé změně uloží, a když se aplikace spustí, přečte si ho zpátky. Z kurzu JavaScriptu víte, že getItem() vrátí null, když uložené nic není, a tak to zkontrolujte:

const ulozena = localStorage.getItem("barva");
const barva = ref(ulozena === null ? "zelená" : ulozena);

V náhledu každé kliknutí na Spustit spustí aplikaci znovu, a dokud máte cvičení otevřené, aplikace najde, co si uložila dřív. Tlačítko Smazat uložená data v konzoli to smaže, jako by aplikace nikdy otevřená nebyla.

Typická chyba je watch(jmeno.value, …). Tím dostane watch() text, který v refu je, a ne samotný ref, a samotný text se změnit nemůže, takže Vue nemá co sledovat. Konzole pak ukáže varování, které začíná [Vue warn]: Invalid watch source.