Vue Academy · Lektion

Composable-Factories und parametrisierte Composables

Composable-Factories erstellen, Status pro Instanz kapseln und gemeinsam genutzten Singleton-Status vermeiden

Composable-Factories und parametrisierte Composables ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Composables mit Parametern

Ein einfaches Composable liefert ein festgelegtes Verhalten. Ein parametrisiertes Composable akzeptiert Argumente, mit denen Sie seine Funktion anpassen können – etwa eine Basis-URL, Optionen oder Standardwerte. Dadurch kann eine Funktion viele Anwendungsfälle abdecken.

Ein einfaches parametrisiertes Composable

Übergeben Sie die Konfiguration als Argumente. Hier wird die URL vom Aufrufer bereitgestellt, sodass ein einziges useFetch für jeden Endpunkt funktioniert.

import { ref } from "vue"

export function useFetch(url) {
  const data = ref(null)
  fetch(url).then(r => r.json()).then(d => data.value = d)
  return { data }
}

Ein Optionsobjekt akzeptieren

Wenn es viele Einstellungen gibt, verwenden Sie ein Optionsobjekt mit Standardwerten. Dadurch bleibt die Aufrufstelle übersichtlich und das Composable flexibel.

export function useFetch(url, options = {}) {
  const { immediate = true, method = "GET" } = options
  const data = ref(null)
  function run() { /* fetch with method */ }
  if (immediate) run()
  return { data, run }
}

Was ist eine Composable-Factory?

Eine Factory geht noch einen Schritt weiter: Sie ist eine Funktion, die ein Composable zurückgibt, das mit gemeinsamen Einstellungen vorkonfiguriert ist. Sie konfigurieren einmal und erhalten anschließend ein maßgeschneidertes Composable, das Sie in mehreren Komponenten verwenden können.

Eine Factory erstellen

Die äußere Funktion erfasst die gemeinsame Konfiguration, zum Beispiel baseURL; die zurückgegebene innere Funktion ist das Composable, wobei die Konfiguration über eine Closure fest eingebunden ist.

export function createApi(baseURL) {
  return function useApi(path) {
    const data = ref(null)
    fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
    return { data }
  }
}

Eine Factory verwenden

Rufen Sie die Factory einmal auf, häufig in einem gemeinsamen Modul, um ein konfiguriertes Composable zu erzeugen. Importieren und verwenden Sie dieses anschließend überall dort, wo Sie es benötigen.

// api.js
export const useApi = createApi("https://api.example.com")

// component
import { useApi } from "./api"
const { data } = useApi("/users")

Zustand pro Instanz

Jedes Mal, wenn Sie ein Composable aufrufen, sind die darin erstellten Refs neu und auf diesen Aufruf beschränkt. Zwei Komponenten, die useFetch aufrufen, erhalten unabhängige data-Refs – ohne versehentlich gemeinsam genutzten Zustand.

const a = useFetch("/posts")   // its own data ref
const b = useFetch("/comments") // a separate data ref

Gemeinsam genutztes Singleton auf Modulebene

Manchmal möchten Sie eine gemeinsame Instanz. Deklarieren Sie den Zustand auf Modulebene, also außerhalb der Funktion, und lassen Sie das Composable darauf zugreifen – dann verwenden alle Aufrufer dieselben Refs.

import { ref } from "vue"
const user = ref(null) // module-level, shared

export function useAuth() {
  function login(u) { user.value = u }
  return { user, login }
}

Pro Instanz vs. Singleton

Zustand innerhalb der Funktion → bei jedem Aufruf neu (pro Komponente) – etwa für Formulare oder Datenabrufe.
Zustand auf Modulebene → gemeinsam genutztes Singleton – etwa für den aktuellen Benutzer, das Theme oder app-weite Flags.

Entscheiden Sie danach, ob die Daten komponentenlokal oder global sind.

Factory und Singleton kombinieren

Eine Factory kann auch ein Singleton erzeugen: Erstellen Sie den gemeinsam genutzten Zustand innerhalb des Factory-Aufrufs, der nur einmal ausgeführt wird, und lassen Sie das zurückgegebene Composable darauf zugreifen.

export function createStore(initial) {
  const state = ref(initial) // created once per factory call
  return function useStore() {
    return { state }
  }
}
export const useCounter = createStore(0)

Wann Sie eine Factory verwenden sollten

Verwenden Sie eine Factory, wenn mehrere Composables eine gemeinsame Konfiguration benötigen, etwa eine Basis-URL, Header oder eine Client-Instanz, oder wenn Sie eine kleine Bibliothek erstellen und deren Nutzern eine einmalige Konfiguration ermöglichen möchten. Andernfalls ist ein parametrisiertes Composable einfacher.

Kurze Überprüfung

Prüfen Sie Ihr Verständnis von Composable-Factories und Gültigkeitsbereichen.

Zusammenfassung

Sie haben Composable-Factories und Gültigkeitsbereiche kennengelernt:

Parametrisierte Composables akzeptieren Argumente oder Optionen, um ihr Verhalten anzupassen.
Eine Factory ist eine Funktion, die ein vorkonfiguriertes Composable zurückgibt (die Konfiguration wird über eine Closure erfasst).
Zustand innerhalb der Funktion gilt pro Instanz; Zustand auf Modulebene ist ein gemeinsam genutztes Singleton.
Verwenden Sie den Zustand pro Instanz für komponentenlokale Daten und ein Singleton für app-weiten Zustand, etwa den aktuellen Benutzer oder das Theme.

Häufig gestellte Fragen

Ist die Lektion „Composable-Factories und parametrisierte Composables“ kostenlos?

Ja — der vollständige Text von „Composable-Factories und parametrisierte Composables“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Composable-Factories und parametrisierte Composables“?

Composable-Factories erstellen, Status pro Instanz kapseln und gemeinsam genutzten Singleton-Status vermeiden Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Composable-Factories und parametrisierte Composables“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Fortgeschrittene Reaktivität: shallowRef und triggerRef
Composable-Factories und parametrisierte Composables
Zustandsautomaten mit XState in Vue
effectScope für gruppierte Effekte

← Zurück zu Vue Academy