Ein Composable zum Laden

Daten aus einer Datei zu laden ist jedes Mal gleich: ein Ref für die Daten, einer für laedt, einer für eine Fehlermeldung und onMounted mit fetch(). Nur die Datei ändert sich. Das ist eine Aufgabe für ein Composable, mit der Adresse der Datei als Parameter:

import { onMounted, ref } from "vue";

export function useFetch(adresse) {
    const daten = ref(null);
    const fehler = ref("");
    const laedt = ref(true);

    onMounted(async () => {
        const antwort = await fetch(adresse);
        if (!antwort.ok) {
            fehler.value = "Entschuldigung, das konnte nicht geladen werden.";
        } else {
            daten.value = await antwort.json();
        }
        laedt.value = false;
    });

    return { daten, fehler, laedt };
}

Eine Komponente, die Daten braucht, ruft es mit dem Namen der Datei auf und bekommt die drei Refs:

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

const { daten, fehler, laedt } = useFetch("menue.json");
</script>

Das ist bemerkenswert:

• onMounted funktioniert auch in einem Composable, und es gehört zu der Komponente, die das Composable aufruft: Die Daten werden geladen, wenn diese Komponente eingehängt wird. Zwei Komponenten, die useFetch() aufrufen, laden jede ihre eigene Datei, jede wenn sie eingehängt wird, und jede hat ihre eigenen daten, fehler und laedt.
• daten beginnt als null, das heißt „noch nichts“: Das Composable kann nicht wissen, was in der Datei steht, ein Array, ein Objekt oder Text. Die Vorlage zeigt die Liste erst, wenn laedt false ist, und dann enthält daten die Speisekarte.
• Die Fehlermeldung ist allgemein, weil das Composable alles lädt.

Solche Composables gibt es in fast jeder Vue-App, und Bibliotheken bieten fertige an. VueUse, eine beliebte Sammlung von Composables, hat ein eigenes useFetch() und auch ein useLocalStorage().