Frontend Academy · Lektion

provide() und inject() für Abhängigkeitsinjektion

Stellen Sie Werte in einer übergeordneten Komponente bereit und injizieren Sie sie tief im Komponentenbaum, um Prop Drilling ohne eine vollständige State-Management-Bibliothek zu vermeiden.

provide() und inject() für Abhängigkeitsinjektion ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Problem des Prop Drilling

Manchmal befinden sich Daten in einer weit oben liegenden Komponente und müssen einen tief verschachtelten Nachkommen erreichen. Sie durch jede dazwischenliegende Komponente weiterzugeben (Prop Drilling) ist umständlich und fehleranfällig.

provide() — Einen Wert deklarieren

Eine übergeordnete Komponente ruft in setup() provide(key, value) auf. Der Wert steht anschließend allen untergeordneten Komponenten zur Verfügung.

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — Einen Wert verwenden

Jede untergeordnete Komponente kann inject(key) aufrufen, um den Wert auszulesen.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

Reaktivität mit ref/reactive

Wenn Sie eine ref oder ein reaktives Objekt bereitstellen, erhalten untergeordnete Komponenten einen reaktiven Wert – Aktualisierungen werden automatisch weitergegeben.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

Symbol-Schlüssel zur Vermeidung von Kollisionen

String-Schlüssel können in großen Apps zu Kollisionen führen. Symbole garantieren Eindeutigkeit – definieren Sie sie in einer gemeinsam verwendeten Datei.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

TypeScript-Unterstützung

Verwenden Sie InjectionKey<T>, um beide Seiten typsicher zu machen.

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

Standardwerte

Wenn keine übergeordnete Komponente den Schlüssel bereitstellt, gibt inject undefined zurück, sofern Sie keinen Standardwert übergeben.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

Schreibgeschützte Provide-Werte

Um zu verhindern, dass untergeordnete Komponenten den gemeinsamen Zustand verändern, umschließen Sie ihn mit readonly().

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

Provide auf App-Ebene

Stellen Sie Werte auf Anwendungsebene bereit, damit sie überall verfügbar sind – das ist besonders für Plugins nützlich.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

Composable-Wrapper

Umschließen Sie provide/inject in einem Composable, um eine übersichtlichere API für die Verwendung bereitzustellen.

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject vs. Pinia

provide/inject: leichtgewichtig, keine Bibliothek erforderlich, ideal für Werte im Plugin-Stil (Theme, Locale, aktueller Benutzer). Pinia: vollständige Zustandsverwaltung mit DevTools, optimal für app-weiten reaktiven Zustand mit komplexen Aktualisierungen.

Kurze Überprüfung

Wie vermeiden Sie am besten Kollisionen von Schlüsseln bei der Verwendung von provide/inject in einer großen Vue-App?

Zusammenfassung: provide/inject

Die übergeordnete Komponente stellt Werte bereit, die untergeordnete Komponente injiziert sie – kein Prop Drilling. Reaktive Werte (ref/reactive) werden reaktiv weitergegeben. Symbol-Schlüssel und InjectionKey ermöglichen typsichere, kollisionsfreie Injection. Der Standardwert wird als zweites Argument von inject übergeben. readonly() verhindert Änderungen. Mit Provide auf App-Ebene können Plugins app-übergreifend Werte bereitstellen. Eine leichtgewichtige Alternative zu Pinia für Werte im Plugin-Stil.

Häufig gestellte Fragen

Ist die Lektion „provide() und inject() für Abhängigkeitsinjektion“ kostenlos?

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

Was lerne ich in „provide() und inject() für Abhängigkeitsinjektion“?

Stellen Sie Werte in einer übergeordneten Komponente bereit und injizieren Sie sie tief im Komponentenbaum, um Prop Drilling ohne eine vollständige State-Management-Bibliothek zu vermeiden. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 1 von 4.

Wie lange dauert die Lektion „provide() und inject() für Abhängigkeitsinjektion“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

provide() und inject() für Abhängigkeitsinjektion
Asynchrone Komponenten und Suspense
Benutzerdefinierte Direktiven
Plugin-System: app.use()

← Zurück zu Frontend Academy