Vue Academy · leksjon

Provide/Inject for tilstand på appnivå

app.provide() for global tilstand, tematisering og i18n, samt hvordan De unngår Pinia i enkle tilfeller.

Leksjon 4 av 413 trinn

Provide/Inject for tilstand på appnivå er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

provide på applikasjonsnivå

I tillegg til provide på komponentnivå kan du tilby en verdi på app-instansen med app.provide. Verdien blir tilgjengelig for alle komponenter i appen.

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

Tilby globale tjenester

Provide på appnivå passer perfekt for singletoner som en autentiseringstjeneste, en HTTP-klient eller en logger – ting hele appen kan ha behov for.

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

Bruke en global tjeneste

Alle komponenter kan hente inn tjenesten ved hjelp av nøkkelen, uansett hvor i treet de befinner seg, uten prop drilling eller ekstra koblingskode.

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

Symbol-nøkler for globale tjenester

For tjenester som gjelder hele appen sørger eksporterte Symbol-nøkler, helst med typer, for trygg og oversiktlig injisering på tvers av kodebasen.

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

Rekkefølge ved oppslag

Når både en provider på appnivå og en på komponentnivå bruker samme nøkkel, vinner den nærmeste tilbyderen for etterkommerne til den komponenten. Provider på appnivå fungerer som global reserve.

Scenarier med mye lesing

Provide/inject fungerer svært godt når mange komponenter bare leser delte data, som tema, lokalisering eller konfigurasjon. Forbrukerne trenger ikke å skrive data, så mønsteret forblir enkelt og forutsigbart.

Sammenlignet med Pinia

Pinia er Vues offisielle bibliotek for tilstandsadministrasjon. Det tilbyr devtools, modulære stores, handlinger, getters og feilsøking med tidsreise – ideelt for kompleks global state som endres ofte.

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

Når provide/inject er tilstrekkelig

For stort sett skrivebeskyttede delte verdier unngår provide/inject de ekstra kostnadene ved en store. Det er lettere, innebygd og tydelig for tema, i18n eller innhentede tjenester.

Når du bør velge Pinia

Velg Pinia når state endres fra mange steder, trenger devtools, må persisteres eller har komplekse avledede data. Pinia sentraliserer logikken bedre enn spredte provide/inject-par.

Kombinere begge

De utelukker ikke hverandre. Du kan bruke Pinia for appdata og provide/inject for lettvektskontekst i komponenttreet, som et skjema eller et UI-tema.

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

Hensyn ved testing

Når du enhetstester en komponent som henter inn en verdi, kan du tilby verdien gjennom testens mount-alternativer med global.provide, slik at komponenten mottar en stub.

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

Kort kontrollspørsmål

Når foretrekkes provide/inject fremfor Pinia?

Besvar den i den interaktive leksjonen

Oppsummering

Du lærte at app.provide eksponerer globale tjenester for alle komponenter, og at de kan hentes inn med nøkkel hvor som helst via inject. Provide/inject egner seg godt for delt kontekst som hovedsakelig leses, mens Pinia passer for kompleks global state som endres ofte og trenger støtte for devtools.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Provide/Inject for tilstand på appnivå» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Provide/Inject for tilstand på appnivå», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Provide/Inject for tilstand på appnivå»?

app.provide() for global tilstand, tematisering og i18n, samt hvordan De unngår Pinia i enkle tilfeller. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Provide/Inject for tilstand på appnivå»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Vue Academy