Waarvoor worden provide en inject gebruikt?

Question

Accepted Answer

`provide`/`inject` stellen een **ancestor component in staat om gegevens aan elke descendant door te geven**, ongeacht hoe diep, zonder props door elk tussenliggend component door te geven. Ze lossen **prop drilling** op. ## Waarom het belangrijk is ```text App → Layout → Sidebar → Menu → MenuItem ``` Als alleen `MenuItem` de `theme` nodig heeft, is het doorgeven als prop via `Layout`, `Sidebar` en `Menu` (die het niet gebruiken) vervelend en rommelig. `provide`/`inject` slaan het midden over. ## Providing in een ancestor ```vue ``` ## Injecting in elke descendant ```vue ``` ## Zorg dat het reactief blijft ```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 ``` Geef het **reactieve** object door (de `ref`, niet zijn `.value`) zodat wanneer het verandert, alle injecterende componenten worden bijgewerkt. ## Gebruik een Symbol-sleutel in bibliotheken ```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 ``` Gebruik `provide`/`inject` voor **dependency-injection binnen een subtree**; pak Pinia als state echt global is of over niet-gerelateerde onderdelen van de app wordt gedeeld. ## Waarom het belangrijk is `provide`/`inject` elimineren prop drilling voor gegevens die veel geneste componenten delen (thema's, locale, formulier/context, plugin-services). Weten hoe je reactieve waarden doorgeeft (zodat updates zich voortplanten), defaults/Symbol-sleutels gebruikt en het onderscheid maakt met global state (Pinia) stelt je in staat om gedeelde context schoon door te geven aan diepe componentbomen.