0Pricing
Vue Academy · Aula

inject() em componentes filhos

inject() com valores padrão, injeção obrigatória e chaves Symbol para definição de namespaces.

inject() em componentes filhos é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

A função de injeção

inject recupera um valor fornecido por um ancestral, procurando-o pela mesma chave. Chame-a em <script setup>.

import { inject } from "vue";
const theme = inject("theme");

A reatividade é preservada

Se o ancestral forneceu uma ref, o valor injetado é essa mesma referência. A leitura de theme.value continua reativa e é atualizada quando o provedor a altera.

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)

Fornecendo um valor padrão

Se nenhum ancestral forneceu a chave, inject retorna undefined. Passe um segundo argumento como padrão para que o componente continue funcionando de forma adequada.

const theme = inject("theme", "light");
// "light" used when nothing was provided

Padrões criados por fábrica

Para padrões que sejam objetos ou tenham custo alto de criação, passe uma função de fábrica e defina o terceiro argumento como true, para que o padrão seja criado somente quando necessário.

const config = inject("config", () => ({ retries: 3 }), true);

Injetando ações

Se o provedor também ofereceu uma função, injete-a da mesma forma e chame-a para solicitar alterações — o provedor é responsável pela modificação.

const updateName = inject("updateName");
updateName("Grace");

Injetando um objeto de estado

Quando o provedor agrupou estado e ações, injete o objeto inteiro e extraia dele o que for necessário.

const { user, updateName } = inject("userStore");

Injeção com segurança de tipos em TypeScript

O Vue exporta InjectionKey<T> para tornar a injeção segura quanto aos tipos. Uma chave tipada informa ao TypeScript exatamente qual é o formato do valor injetado.

import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");

Usando a chave tipada

Forneça e injete usando a chave tipada. Agora o TypeScript infere o tipo do valor e sinaliza incompatibilidades.

provide(themeKey, theme);          // theme: Ref<string>
const theme = inject(themeKey);    // inferred Ref<string> | undefined

Chaves de símbolo para garantir exclusividade

Usar um Symbol como chave, geralmente combinado com InjectionKey, garante que não haja colisões de texto entre provedores sem relação em uma base de código grande.

export const authKey = Symbol("auth") as InjectionKey<AuthService>;

Lidando com provedores ausentes

Em configurações rigorosas, talvez seja melhor gerar um erro quando uma injeção obrigatória estiver ausente, revelando problemas de ligação antecipadamente em vez de usar undefined silenciosamente.

const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");

Injete em qualquer ponto da subárvore

Um componente pode injetar o valor independentemente da profundidade, desde que algum ancestral tenha fornecido a chave. Os componentes intermediários permanecem intactos — esse é o objetivo de provide e da injeção.

Verificação rápida

O que inject("theme", "light") retorna quando não existe nenhum provedor?

Recapitulação

Você aprendeu que inject(key) lê um valor fornecido, preservando a reatividade das referências. Passe um valor padrão ou uma fábrica para obter um substituto adequado e use InjectionKey<T> com chaves Symbol para uma injeção segura quanto aos tipos e sem colisões.

Perguntas Frequentes

A aula “inject() em componentes filhos” é grátis?

Sim — o texto completo de “inject() em componentes filhos” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “inject() em componentes filhos”?

inject() com valores padrão, injeção obrigatória e chaves Symbol para definição de namespaces. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 3 de 4.

Quanto tempo leva a aula “inject() em componentes filhos”?

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 Vue Academy?

Sim. Cada aula de Vue 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. O problema da prop drilling
  2. provide() em componentes pais
  3. inject() em componentes filhos
  4. Provide/Inject para estado no nível da aplicação
← Voltar para Vue Academy