provide() och inject() för beroendeinjektion
Tillhandahåll värden i en överordnad komponent och injicera dem djupt i trädet för att undvika prop drilling utan ett fullständigt bibliotek för tillståndshantering.
provide() och inject() för beroendeinjektion är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Problemet med prop drilling
Ibland finns data i en högt placerad komponent och behöver nå en djupt nedbäddad komponent. Att skicka den genom varje mellanliggande komponent, så kallad prop drilling, är omständligt och skört.
provide() — deklarera ett värde
En överordnad komponent anropar provide(key, value) i setup(). Värdet blir tillgängligt för alla underordnade komponenter.
<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
const theme = ref('dark');
provide('theme', theme);
</script>inject() — använda ett värde
En underordnad komponent kan anropa inject(key) för att läsa värdet.
<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';
const theme = inject('theme');
</script>
<template>
<div :class="theme">Theme is: {{ theme }}</div>
</template>Reaktivitet med ref/reactive
Om ni tillhandahåller ett ref- eller reactive-objekt får underordnade komponenter ett reaktivt värde – uppdateringar sprids automatiskt.
// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);
// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactiveSymbol-nycklar för att undvika kollisioner
Strängnycklar riskerar att kollidera i stora appar. Symboler garanterar unikhet – definiera dem i en gemensam fil.
// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey = Symbol('user');
// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);TypeScript-stöd
Använd InjectionKey<T> för att göra båda sidorna typsäkra.
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> | undefinedStandardvärden
Om ingen överordnad komponent tillhandahåller nyckeln returnerar inject undefined, såvida ni inte skickar med ett standardvärde.
const theme = inject('theme', 'light'); // default if missing
const lazy = inject('user', () => createDefaultUser(), true); // factorySkrivskyddade värden från provide
Förhindra att underordnade komponenter ändrar delat tillstånd genom att omsluta det med readonly().
import { readonly } from 'vue';
const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutateprovide på appnivå
Tillhandahåll värden på appnivå så att de är tillgängliga överallt – användbart för pluginer.
// 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
Omslut provide/inject i en composable för ett renare API för användare.
// 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 kontra Pinia
provide/inject: lättviktigt, inget bibliotek krävs och passar bra för pluginliknande värden, till exempel tema, lokalisering och aktuell användare. Pinia: fullständig tillståndshantering med DevTools, lämplig för reaktivt tillstånd på appnivå med komplexa uppdateringar.
Snabbkontroll
Vilket sätt rekommenderas för att undvika kollisioner mellan nycklar när provide/inject används i en stor Vue-app?
Sammanfattning: provide/inject
En överordnad komponent tillhandahåller värdet och en underordnad komponent injicerar det – ingen prop drilling. Reaktiva värden, ref/reactive, sprids reaktivt. Symbol-nycklar + InjectionKey ger typsäker injicering utan kollisioner. Standardvärdet anges som det andra argumentet till inject. readonly() förhindrar ändringar. provide på appnivå kan användas för pluginer som ska fungera i hela appen. Ett lättviktigt alternativ till Pinia för pluginliknande värden.
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
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”provide() och inject() för beroendeinjektion” gratis?
Ja – hela texten till ”provide() och inject() för beroendeinjektion” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”provide() och inject() för beroendeinjektion”?
Tillhandahåll värden i en överordnad komponent och injicera dem djupt i trädet för att undvika prop drilling utan ett fullständigt bibliotek för tillståndshantering. Ni övar på Frontend 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 Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend 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 1 av 4.
Hur lång tid tar lektionen ”provide() och inject() för beroendeinjektion”?
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 Frontend Academy-lektionen?
Ja. Varje Frontend 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
- provide() och inject() för beroendeinjektion
- Asynkrona komponenter och Suspense
- Anpassade direktiv
- Pluginsystem: app.use()