Vue Academy · Lektion

provide/inject für State auf App-Ebene

app.provide() für globalen State, Theming und i18n sowie zum Verzicht auf Pinia in einfachen Fällen.

provide/inject für State auf App-Ebene ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Provide auf Anwendungsebene

Neben dem komponentenbezogenen provide können Sie Werte mit app.provide auf der App-Instanz bereitstellen. Der Wert steht dadurch jeder Komponente in der App zur Verfügung.

const app = createApp(App);
app.provide("appVersion", "1.0.0");

Globale Services bereitstellen

Provide auf Anwendungsebene eignet sich ideal für Singletons wie einen Authentifizierungsdienst, einen HTTP-Client oder einen Logger – also für Dinge, die möglicherweise von der gesamten App benötigt werden.

import { authService } from "./auth";
app.provide("auth", authService);

Einen globalen Service verwenden

Jede Komponente kann den Service an beliebiger Stelle im Baum über seinen Schlüssel injizieren – ohne Prop-Drilling und ohne zusätzliche Verdrahtung.

const auth = inject("auth");
auth.login(credentials);

Symbol-Schlüssel für globale Werte

Bei anwendungsweiten Services sorgen exportierte, idealerweise typisierte Symbol-Schlüssel dafür, dass Injection in der gesamten Codebasis sicher und leicht auffindbar bleibt.

// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);

Reihenfolge der Suche

Wenn sowohl ein Provider auf Anwendungsebene als auch ein komponentenbezogener Provider denselben Schlüssel verwenden, gewinnt für die Nachfahren dieser Komponente der nächstgelegene Provider. Der Provider auf Anwendungsebene dient als globaler Fallback.

Szenarien mit überwiegendem Lesen

Provide/inject eignet sich besonders gut, wenn viele Komponenten gemeinsam verwendete Daten lediglich lesen – etwa Theme, Locale oder Konfiguration. Die Nutzer müssen nichts schreiben, wodurch das Muster einfach und vorhersehbar bleibt.

Vergleich mit Pinia

Pinia ist die offizielle State-Management-Bibliothek von Vue. Sie bietet Devtools, modulare Stores, Aktionen, Getter und Time-Travel-Debugging und eignet sich ideal für komplexen, häufig veränderten globalen State.

import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });

Wann provide/inject ausreicht

Für überwiegend schreibgeschützte, gemeinsam verwendete Werte vermeidet provide/inject den Aufwand eines Stores. Das Muster ist leichter, integriert und für Theme, i18n oder injizierte Services gut geeignet.

Wann Sie Pinia verwenden sollten

Wählen Sie Pinia, wenn der State an vielen Stellen verändert wird, Devtools benötigt, dauerhaft gespeichert werden muss oder komplexe abgeleitete Daten enthält. Pinia zentralisiert die Logik besser als verstreute provide/inject-Paare.

Beides kombinieren

Die beiden Ansätze schließen einander nicht aus. Sie können Pinia für App-Daten und provide/inject für einen schlanken Kontext im Komponentenbaum verwenden, etwa für ein Formular oder ein UI-Theme.

provide("formContext", { register, errors });

Aspekte beim Testen

Wenn Sie eine Komponente testen, die eine Injection verwendet, stellen Sie den Wert über die Mount-Optionen des Tests mit global.provide bereit, damit die Komponente einen Stub erhält.

mount(MyComponent, {
  global: { provide: { auth: fakeAuth } }
});

Kurze Überprüfung

Wann ist provide/inject Pinia vorzuziehen?

Zusammenfassung

Sie haben gelernt, dass app.provide globale Services für jede Komponente verfügbar macht und diese überall über ihren Schlüssel mit inject verwendet werden können. Provide/inject eignet sich besonders für gemeinsam verwendeten Kontext mit überwiegendem Lesen, während Pinia für komplexen, häufig veränderten globalen State mit Devtools-Unterstützung geeignet ist.

Häufig gestellte Fragen

Ist die Lektion „provide/inject für State auf App-Ebene“ kostenlos?

Ja — der vollständige Text von „provide/inject für State auf App-Ebene“ 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 „provide/inject für State auf App-Ebene“?

app.provide() für globalen State, Theming und i18n sowie zum Verzicht auf Pinia in einfachen Fällen. 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 4 von 4.

Wie lange dauert die Lektion „provide/inject für State auf App-Ebene“?

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

← Zurück zu Vue Academy