0Pricing
Frontend Academy · Aula

provide() e inject() para injeção de dependências

Disponibilizar valores num componente ancestral e injetá-los profundamente na árvore, evitando a passagem sucessiva de propriedades sem uma biblioteca completa de gestão de estado.

provide() e inject() para injeção de dependências é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O problema da passagem de propriedades

Às vezes, os dados ficam em um componente mais acima e precisam chegar a um descendente profundo. Passá-los por todos os componentes intermediários, em uma cadeia de propriedades, é trabalhoso e frágil.

provide() — Declarando um valor

Um ancestral chama provide(key, value) em setup(). O valor fica disponível para todos os descendentes.

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

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

inject() — Consumindo um valor

Qualquer descendente chama inject(key) para lê-lo.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

Reatividade com ref/reactive

Se você fornecer uma ref ou um objeto reactive, os descendentes receberão um valor reativo — as atualizações serão propagadas automaticamente.

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

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

Chaves de símbolo para evitar colisões

Chaves de texto correm o risco de colidir em apps grandes. Símbolos garantem exclusividade — defina-os em um arquivo compartilhado.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

Suporte a TypeScript

Use InjectionKey<T> para garantir a segurança de tipos nos dois lados.

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

Valores padrão

Se nenhum ancestral fornecer a chave, inject retornará undefined, a menos que você passe um valor padrão.

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

Valores fornecidos somente para leitura

Para impedir que os descendentes alterem o estado compartilhado, envolva-o com readonly().

import { readonly } from 'vue';

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

provide no nível da aplicação

Forneça valores no nível da aplicação para que fiquem disponíveis em todos os lugares — isso é útil para plugins.

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

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

Encapsulamento reutilizável

Encapsule provide/inject em uma função composable para obter uma API mais simples para quem a consome.

// 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 versus Pinia

provide/inject: leve, sem biblioteca, ideal para valores no estilo de plugin, como tema, localidade e usuário atual. Pinia: gerenciamento completo de estado com DevTools, ideal para estados reativos de toda a aplicação com atualizações complexas.

Verificação rápida

Qual é a forma recomendada de evitar colisões de chaves ao usar provide/inject em um app Vue grande?

Recapitulação: provide/inject

O ancestral fornece e o descendente injeta — sem passagem de propriedades em cadeia. Valores reativos, como ref/reactive, são propagados de forma reativa. Chaves de símbolo e InjectionKey permitem uma injeção segura quanto aos tipos e sem colisões. O valor padrão é o segundo argumento de inject. Use readonly() para impedir alterações. O provide no nível da aplicação é útil para plugins compartilhados entre apps. É uma alternativa leve ao Pinia para valores no estilo de plugin.

Perguntas Frequentes

A aula “provide() e inject() para injeção de dependências” é grátis?

Sim — o texto completo de “provide() e inject() para injeção de dependências” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “provide() e inject() para injeção de dependências”?

Disponibilizar valores num componente ancestral e injetá-los profundamente na árvore, evitando a passagem sucessiva de propriedades sem uma biblioteca completa de gestão de estado. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “provide() e inject() para injeção de dependências”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. provide() e inject() para injeção de dependências
  2. Componentes assíncronos e Suspense
  3. Diretivas personalizadas
  4. Sistema de plugins: app.use()
← Voltar para Frontend Academy