Vue Academy · Lektion

Provide/Inject för tillstånd på appnivå

app.provide() för globalt tillstånd, temahantering och i18n, samt undvika Pinia i enkla fall.

Lektion 4 av 413 steg

Provide/Inject för tillstånd på appnivå är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

provide på applikationsnivå

Utöver komponentnivåns provide kan du tillhandahålla värden på appinstansen med app.provide. Värdet blir tillgängligt för alla komponenter i appen.

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

Tillhandahålla globala tjänster

Provide på applikationsnivå passar utmärkt för singletoner som en autentiseringstjänst, en HTTP-klient eller en logger – sådant som hela appen kan behöva.

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

Använda en global tjänst

Alla komponenter kan injicera tjänsten med hjälp av nyckeln, var som helst i trädet, utan prop-drilling och utan extra kopplingskod.

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

Symbol-nycklar för globala värden

För tjänster som gäller hela appen håller exporterade Symbol-nycklar, helst typade, injiceringen säker och lätt att hitta i hela kodbasen.

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

Uppslagsordning

När både en tillhandahållare på applikationsnivå och en på komponentnivå använder samma nyckel vinner den närmaste tillhandahållaren för komponentens underordnade komponenter. Tillhandahållaren på applikationsnivå fungerar som global reserv.

Läsintensiva scenarier

Provide/inject passar utmärkt när många komponenter bara läser delade data – tema, språkinställning och konfiguration. Konsumenterna behöver inte skriva, så mönstret förblir enkelt och förutsägbart.

Jämförelse med Pinia

Pinia är Vues officiella bibliotek för tillståndshantering. Det erbjuder devtools, modulära stores, åtgärder, getters och felsökning med time travel – idealiskt för komplext globalt tillstånd som ändras ofta.

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

När provide/inject räcker

För delade värden som i huvudsak är skrivskyddade undviker provide/inject den extra komplexiteten hos en store. Det är inbyggt, lättviktigt och tydligt för teman, i18n och injicerade tjänster.

När bör du välja Pinia

Välj Pinia när tillståndet ändras från många ställen, behöver devtools, måste bevaras eller innehåller komplex härledd data. Det centraliserar logiken bättre än utspridda provide/inject-par.

Kombinera båda

De utesluter inte varandra. Du kan använda Pinia för appdata och provide/inject för lättviktiga komponentträdskontexter, till exempel ett formulär eller ett UI-tema.

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

Testöverväganden

När du enhetstestar en komponent som injicerar ett värde tillhandahåller du det via testets mount-alternativ global.provide, så att komponenten får en stub.

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

Snabbkontroll

När föredras provide/inject framför Pinia?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att app.provide exponerar globala tjänster för alla komponenter, som sedan kan använda dem med en nyckel via inject var som helst. Provide/inject passar bäst för delad kontext som främst läses, medan Pinia lämpar sig för komplext globalt tillstånd som ändras ofta och behöver stöd för devtools.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Provide/Inject för tillstånd på appnivå” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Provide/Inject för tillstånd på appnivå”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Provide/Inject för tillstånd på appnivå”?

app.provide() för globalt tillstånd, temahantering och i18n, samt undvika Pinia i enkla fall. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Provide/Inject för tillstånd på appnivå”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy