À quoi servent provide et inject ?

Question

Accepted Answer

`provide`/`inject` permettent à un **composant ancêtre de fournir des données à n'importe quel descendant**, peu importe la profondeur, sans passer les props à travers chaque composant intermédiaire. Ils résolvent le **prop drilling**. ## Pourquoi c'est important ```text App → Layout → Sidebar → Menu → MenuItem ``` Si seul `MenuItem` a besoin du `theme`, le passer en prop à travers `Layout`, `Sidebar` et `Menu` (qui ne l'utilisent pas) est fastidieux et encombrant. `provide`/`inject` contournent le problème. ## Fournir dans un ancêtre ```vue ``` ## Injecter dans n'importe quel descendant ```vue ``` ## Garder la réactivité ```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 ``` Fournissez l'objet **réactif** (la `ref`, pas son `.value`) pour que, quand il change, tous les composants injectant se mettent à jour. ## Utiliser une clé Symbol dans les bibliothèques ```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 ``` Utilisez `provide`/`inject` pour l'**injection de dépendances au sein d'un sous-arbre** ; recourez à Pinia quand l'état est vraiment global ou partagé entre des parties sans lien de la app. ## Pourquoi c'est important `provide`/`inject` éliminent le prop drilling pour les données que de nombreux composants imbriqués partagent (thèmes, locale, formulaires/contexte, services de plugin). Savoir fournir des valeurs réactives (pour que les mises à jour se propagent), utiliser des défauts/clés Symbol, et distinguer cela de l'état global (Pinia) vous permet de passer le contexte partagé proprement à travers des arbres de composants profonds.