Zusammenfassung

In dieser Lektion hast du gelernt:

• Ein Composable ist eine Funktion, deren Name mit use beginnt. Sie benutzt ref, computed, watch oder Lifecycle-Hooks von Vue und gibt zurück, was eine Komponente braucht: Refs, berechnete Werte, Funktionen.
• Es steht in einer eigenen .js-Datei und wird unter seinem Namen exportiert: export function useZaehler(start) { … }. Eine Komponente importiert es in geschweiften Klammern, import { useZaehler } from "./useZaehler.js";, und ruft es oben im <script setup> auf.
• Es gibt mehrere Dinge in einem Objekt zurück, das die Komponente auseinandernimmt, const { anzahl, erhoehen } = useZaehler(0);, oder einen einzelnen Ref, const name = useLocalStorage("name", "");.
• Parameter machen es vielseitiger: useLocalStorage(schluessel, anfangswert) speichert alles unter jedem Schlüssel, und useFetch(adresse) lädt jede Datei.
• Jeder Aufruf erstellt neue Refs, also hat jede Komponente ihren eigenen State. Lifecycle-Hooks in einem Composable gehören zu der Komponente, die es aufgerufen hat: useFetch() lädt, wenn diese Komponente eingehängt wird.
• State, den mehrere Komponenten teilen, ist ein Ref außerhalb jeder Funktion in einem Modul, etwa export const bestellung = ref([]); in bestellung.js, mit den Funktionen, die ihn ändern, daneben. Ein Modul läuft nur einmal, also bekommt jede Datei, die es importiert, denselben Ref. Größere Apps nehmen dafür Pinia.

In der nächsten Lektion, Abschlussprojekt, setzt du den ganzen Kurs in einer eigenen App zusammen, einem Gewohnheits-Tracker, und siehst, wie du Vue-Apps auf deinem eigenen Computer baust.

Aber übe zuerst mit einem Composable, das zählt, wie lange eine Komponente auf der Seite ist. App.vue und Timer.vue benutzen es beide, und jede zählt für sich.