Para o que são usados provide e inject?

Question

Accepted Answer

`provide`/`inject` permitem que um **componente ancestral forneça dados a qualquer descendente**, não importa a profundidade, sem passar props através de cada componente intermediário. Eles resolvem o problema de **prop drilling**. ## O problema: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` Se apenas `MenuItem` precisa de `theme`, passá-lo como prop através de `Layout`, `Sidebar` e `Menu` (que não o usam) é tedioso e bagunçado. `provide`/`inject` pulam o meio. ## Providing em um ancestral ```vue ``` ## Injecting em qualquer descendente ```vue ``` ## Mantenha isso reativo ```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 ``` Fornecido o objeto **reativo** (o `ref`, não seu `.value`) para que quando mudar, todos os componentes injetados sejam atualizados. ## Use uma chave Symbol em bibliotecas ```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 ``` Use `provide`/`inject` para **dependency-injection dentro de uma subárvore**; recorra a Pinia quando o estado é verdadeiramente global ou compartilhado em partes não relacionadas da aplicação. ## Por que isso importa `provide`/`inject` eliminam prop drilling para dados que muitos componentes aninhados compartilham (temas, locale, formulário/contexto, serviços de plugin). Saber fornecer valores reativos (para que as atualizações se propaguem), usar chaves padrão/Symbol e distinguir isso do estado global (Pinia) permite passar contexto compartilhado de forma limpa através de árvores de componentes profundas.