Frontend Academy · leksjon

provide() og inject() for avhengighetsinjeksjon

Gjør verdier tilgjengelige i en overordnet komponent og injiser dem dypt i treet, slik at du unngår prop drilling uten et komplett bibliotek for tilstandsbehandling.

Leksjon 1 av 413 trinn

provide() og inject() for avhengighetsinjeksjon er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Problemet med prop drilling

Noen ganger ligger data i en høytliggende komponent og må nå frem til en dypt nestet etterkommer. Det er tungvint og skjørt å sende dataene gjennom hver mellomliggende komponent (prop drilling).

provide() — Deklarere en verdi

En overordnet komponent kaller provide(key, value) i setup(). Verdien blir tilgjengelig for alle etterkommere.

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — Bruke en verdi

En hvilken som helst etterkommer kaller inject(key) for å lese verdien.

<!-- 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

Hvis du oppgir en ref eller et reaktivt objekt, får etterkommerne en reaktiv verdi – oppdateringer videreføres automatisk.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

Symbolnøkler for å unngå kollisjoner

Strengnøkler kan kollidere i store apper. Symboler garanterer unikhet – definer dem i en delt 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øtte

Bruk InjectionKey<T> for typesikkerhet på begge sider.

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> | undefined

Standardverdier

Hvis ingen overordnet komponent oppgir nøkkelen, returnerer inject undefined med mindre det sendes inn en standardverdi.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

Skrivebeskyttede provides

For å hindre etterkommere i å endre delt tilstand kan du pakke den inn med readonly().

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

Provide på appnivå

Oppgi verdier på applikasjonsnivå slik at de er tilgjengelige overalt – nyttig for programtillegg.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

Wrapper for composable

Pakke inn provide/inject i en composable for å gi brukerne et ryddigere API.

// 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: lettvektig, uten bibliotek og ideelt for verdier i programtilleggstil: tema, lokalisering og gjeldende bruker. Pinia: fullstendig tilstandsbehandling med DevTools, optimalt for reaktiv tilstand på appnivå med komplekse oppdateringer.

Hurtigsjekk

Hva er den anbefalte måten å unngå nøkkelkollisjoner på når provide/inject brukes på tvers av en stor Vue-app?

Besvar den i den interaktive leksjonen

Oppsummering: provide/inject

En overordnet komponent oppgir, og en etterkommer injiserer – ingen prop drilling. Reaktive verdier (ref/reactive) videreføres reaktivt. Symbolnøkler + InjectionKey gir typesikker injisering uten kollisjoner. Standardverdi som det andre argumentet til inject. readonly() for å hindre endringer. Provide på appnivå for programtillegg på tvers av appen. Et lettvektig alternativ til Pinia for verdier i programtilleggstil.

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: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «provide() og inject() for avhengighetsinjeksjon» gratis?

Ja – hele teksten i «provide() og inject() for avhengighetsinjeksjon» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «provide() og inject() for avhengighetsinjeksjon»?

Gjør verdier tilgjengelige i en overordnet komponent og injiser dem dypt i treet, slik at du unngår prop drilling uten et komplett bibliotek for tilstandsbehandling. Du øver på Frontend 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend 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 1 av 4.

Hvor lang tid tar leksjonen «provide() og inject() for avhengighetsinjeksjon»?

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 Frontend Academy-leksjonen?

Ja. Alle Frontend 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

provide() og inject() for avhengighetsinjeksjon
Asynkrone komponenter og Suspense
Egendefinerte direktiver
Plugin-system: app.use()

← Tilbake til Frontend Academy