Shrnutí

V této lekci jste se naučili, že:

• Composable je funkce, jejíž název začíná na use. Používá ref, computed, watch nebo funkce životního cyklu z Vue a vrací, co komponenta potřebuje: refy, vypočítané hodnoty, funkce.
• Je ve vlastním souboru .js a exportuje se pod svým názvem: export function usePocitadlo(zacatek) { … }. Komponenta ji importuje ve složených závorkách, import { usePocitadlo } from "./usePocitadlo.js";, a zavolá ji nahoře v <script setup>.
• Několik věcí vrací v objektu, ze kterého je komponenta vytáhne, const { pocet, pridej } = usePocitadlo(0);, nebo vrací jediný ref, const jmeno = useLocalStorage("jmeno", "");.
• Díky parametrům se hodí na víc věcí: useLocalStorage(klic, vychozi) uloží cokoli pod libovolným klíčem a useNacitani(adresa) načte jakýkoli soubor.
• Každé volání vytvoří nové refy, a tak má každá komponenta svůj vlastní stav. Funkce životního cyklu v composable patří ke komponentě, která ji zavolala: useNacitani() načítá, když se připojí tato komponenta.
• Stav, který sdílí několik komponent, je ref mimo jakoukoli funkci, v modulu, třeba export const objednavka = ref([]); v objednavka.js, a hned u něj funkce, které ho mění. Modul proběhne jen jednou, takže každý soubor, který ho importuje, dostane stejný ref. Větší aplikace na to používají knihovnu Pinia.

V další lekci, Závěrečný projekt, spojíte celý kurz ve vlastní aplikaci, sledování návyků, a uvidíte, jak dělat aplikace ve Vue na vlastním počítači.

Nejdřív si ale procvičte composable, která počítá, jak dlouho je komponenta na stránce. Použijí ji App.vue i Casovac.vue a každá bude počítat sama za sebe.