Hva brukes provide og inject til?

Question

Accepted Answer

`provide`/`inject` lar en **ancestor-komponent levere data til en hvilken som helst descendant**, uansett hvor dypt, uten å sende props gjennom hvert mellomliggende komponent. De løser **prop drilling**. ## Problemet: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` Hvis bare `MenuItem` trenger `theme`, er det tungvint og uoversiktlig å sende det som en prop gjennom `Layout`, `Sidebar` og `Menu` (som ikke bruker det). `provide`/`inject` omgår midten. ## Providing i en ancestor ```vue ``` ## Injecting i en descendant ```vue ``` ## Hold det reaktivt ```js // ✅ provide a ref/reactive so descendants see updates provide("theme", theme); // theme is a ref → reactive // ❌ provide("theme", theme.value) → passes a snapshot, not reactive ``` Lever det **reaktive** objektet (the `ref`, ikke dets `.value`) slik at når det endres, oppdateres alle injiserende komponenter. ## Bruk en Symbol-nøkkel i biblioteker ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // avoids string-key collisions ``` ## provide/inject vs Pinia ```text provide/inject → pass data down a specific subtree (theme, form context, a service) Pinia → global, app-wide shared state (user, cart) usable anywhere ``` Bruk `provide`/`inject` for **dependency-injection innen et subtre**; bruk Pinia når state er virkelig global eller delt på tvers av ikke-relaterte deler av appen. ## Hvorfor det betyr noe `provide`/`inject` eliminerer prop drilling for data som mange nestede komponenter deler (tema, locale, skjema/kontekst, plugin-tjenester). Å vite at du skal levere reaktive verdier (slik at oppdateringer propagerer), bruke defaults/Symbol-nøkler, og skille det fra global state (Pinia) lar deg sende delt kontekst rent gjennom dype komponenttrær.