Stav

V úvodu jste viděli počítadlo, které fungovalo, a slíbili jsme vám, že se dozvíte, jak funguje. Tady je vysvětlení. Nejdřív zkuste stejné počítadlo s obyčejnou proměnnou:

<script setup>
let razitka = 0;

function pridejRazitko() {
    razitka++;
    console.log(razitka);
}
</script>

<template>
    <p>Razítka: {{ razitka }}</p>
    <button @click="pridejRazitko">Přidat razítko</button>
</template>

Klikněte na tlačítko třikrát a konzole ukáže:

1
2
3

Proměnná se tedy mění, ale stránka pořád ukazuje Razítka: 0. Proč? Vue šablonu vykreslí: vytvoří z ní prvky stránky s hodnotami, které mají proměnné právě v tu chvíli. Znovu ji vykreslí, jen když ví, že se změnilo něco, co šablona používá. Obyčejná proměnná nikomu neřekne, že se změnila, takže se to Vue nikdy nedozví a stránka zůstane taková, jakou ji vykreslilo poprvé.

Pro hodnoty, které se mění, má Vue funkci ref():

<script setup>
import { ref } from "vue";

const razitka = ref(0);

function pridejRazitko() {
    razitka.value++;
}
</script>

<template>
    <p>Razítka: {{ razitka }}</p>
    <button @click="pridejRazitko">Přidat razítko</button>
</template>

Teď každé kliknutí přidá razítko a stránka ho hned ukáže. Co je nového:

• import { ref } from "vue"; vezme z Vue funkci ref, abyste ji mohli v tomto souboru použít.
• ref(0) vytvoří ref, malý objekt, který v sobě drží hodnotu, tady 0. Ve skriptu je ta hodnota razitka.value a právě tu měníte. V šabloně je to pořád jen razitka; proč, vysvětlí další cvičení.
• Když se razitka.value změní, Vue to ví a vykreslí šablonu znovu, s novou hodnotou. Stránku neměníte sami, jako jste to dělali pomocí textContent v kurzu JavaScriptu. Změníte data a stránku změní Vue.

Data aplikace, která se mohou měnit, třeba počet razítek, se nazývají její stav. Hodnoty, které Vue takhle sleduje, jsou reaktivní: stránka na jejich změny reaguje.

Typická chyba: chybí řádek s import. Stránka zůstane prázdná a konzole hlásí ReferenceError: ref is not defined.