Provide/inject voor state op applicatieniveau
app.provide() voor globale state, theming en i18n, en Pinia vermijden voor eenvoudige gevallen.
Provide/inject voor state op applicatieniveau is een gratis Vue Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
provide op applicatieniveau
Naast provide op componentniveau kun je ook een waarde aanbieden op de app-instantie met app.provide. De waarde wordt beschikbaar voor elke component in de app.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Globale diensten aanbieden
Provide op applicatieniveau is ideaal voor enkelvoudige instanties zoals een authenticatiedienst, een HTTP-client of een logboekschrijver: zaken die de hele app nodig kan hebben.
import { authService } from "./auth";
app.provide("auth", authService);Een globale dienst gebruiken
Elke component kan de dienst overal in de boom aan de hand van de sleutel injecteren, zonder eigenschappen door meerdere lagen te hoeven doorgeven en zonder extra verbindingswerk.
const auth = inject("auth");
auth.login(credentials);Symbol-sleutels voor globale waarden
Voor diensten die overal in de app beschikbaar zijn, houden geëxporteerde Symbol-sleutels, bij voorkeur getypeerd, injectie veilig en vindbaar in de hele codebasis.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Volgorde van opzoeken
Wanneer zowel een aanbieder op applicatieniveau als een aanbieder op componentniveau dezelfde sleutel gebruikt, wint de dichtstbijzijnde aanbieder voor de onderliggende componenten van die component. De aanbieder op applicatieniveau fungeert als globale standaardwaarde.
Scenario's waarin vooral wordt gelezen
Provide/inject is uitstekend wanneer veel componenten gedeelde gegevens alleen lezen, zoals een thema, landinstelling of configuratie. Gebruikers hoeven niet te schrijven, waardoor het patroon eenvoudig en voorspelbaar blijft.
Vergelijking met Pinia
Pinia is de officiële bibliotheek voor statusbeheer van Vue. De bibliotheek biedt ontwikkelhulpmiddelen, modulaire statusopslag, acties, getters en foutopsporing met tijdreizen. Dat is ideaal voor complexe, vaak gewijzigde globale status.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Wanneer provide/inject voldoende is
Voor grotendeels alleen-lezen gedeelde waarden vermijdt provide/inject de extra belasting van een statusopslag. Het is lichter, ingebouwd en duidelijk voor een thema, i18n of geïnjecteerde diensten.
Wanneer kies je voor Pinia
Kies Pinia wanneer status vanuit veel plaatsen wordt gewijzigd, ontwikkelhulpmiddelen nodig zijn, de status blijvend moet worden opgeslagen of er complexe afgeleide gegevens zijn. Pinia centraliseert de logica beter dan verspreide provide/inject-paren.
Beide combineren
Ze sluiten elkaar niet uit. Je kunt Pinia gebruiken voor appgegevens en provide/inject voor lichtgewicht context in de componentenboom, zoals een formulier of een UI-thema.
provide("formContext", { register, errors });Aandachtspunten voor tests
Geef bij het uitvoeren van een unit-test voor een component die injecteert de waarde door via de montageopties van de test met global.provide, zodat de component een testdubbel ontvangt.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Korte controle
Wanneer heeft provide/inject de voorkeur boven Pinia?
Samenvatting
Je hebt geleerd dat app.provide globale diensten beschikbaar maakt voor elke component. Je gebruikt deze overal aan de hand van een sleutel via inject. Provide/inject is sterk voor gedeelde context die vooral wordt gelezen, terwijl Pinia geschikt is voor complexe, vaak gewijzigde globale status met ondersteuning voor ontwikkelhulpmiddelen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Provide/inject voor state op applicatieniveau” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Provide/inject voor state op applicatieniveau”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Provide/inject voor state op applicatieniveau”?
app.provide() voor globale state, theming en i18n, en Pinia vermijden voor eenvoudige gevallen. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Provide/inject voor state op applicatieniveau”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Het probleem van prop drilling
- provide() in parentcomponenten
- inject() in childcomponenten
- Provide/inject voor state op applicatieniveau