Composable na načítání

Načítání dat ze souboru je pokaždé stejné: ref pro data, ref pro nacitani, ref pro chybovou zprávu a onMounted s fetch(). Mění se jen soubor. To je práce pro composable s adresou souboru jako parametrem:

import { onMounted, ref } from "vue";

export function useNacitani(adresa) {
    const data = ref(null);
    const chyba = ref("");
    const nacitani = ref(true);

    onMounted(async () => {
        const odpoved = await fetch(adresa);
        if (!odpoved.ok) {
            chyba.value = "Omlouváme se, tohle se nepodařilo načíst.";
        } else {
            data.value = await odpoved.json();
        }
        nacitani.value = false;
    });

    return { data, chyba, nacitani };
}

Komponenta, která data potřebuje, ji zavolá s názvem souboru a dostane tři refy:

<script setup>
import { useNacitani } from "./useNacitani.js";

const { data, chyba, nacitani } = useNacitani("nabidka.json");
</script>

Čeho si všimnout:

• onMounted funguje i v composable a patří ke komponentě, která composable zavolala: data se načtou, když se připojí tato komponenta. Dvě komponenty, které zavolají useNacitani(), načtou každá svůj soubor, každá při svém připojení, a každá má svoje data, chyba a nacitani.
• data začínají jako null, tedy „zatím nic“: composable nemůže vědět, co v souboru je, jestli pole, objekt, nebo text. Šablona ukáže seznam, až když je nacitani false, a to už jsou v data položky nabídky.
• Chybová zpráva je obecná, protože composable načítá cokoli.

Takové composables najdete skoro v každé aplikaci ve Vue a knihovny nabízejí i hotové. VueUse, oblíbená sbírka composables, má vlastní useFetch() a také useLocalStorage().