Provide/Inject para estado no nível da aplicação
app.provide() para estado global, temas, i18n e como evitar Pinia em casos simples.
Provide/Inject para estado no nível da aplicação é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.
provide no nível da aplicação
Além de provide no nível do componente, você pode fornecer dados na instância do app com app.provide. O valor ficará disponível para todos os componentes do app.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Fornecendo serviços globais
provide no nível do app é ideal para elementos únicos, como um serviço de autenticação, um cliente HTTP ou um registrador — recursos de que o app inteiro pode precisar.
import { authService } from "./auth";
app.provide("auth", authService);Consumindo um serviço global
Qualquer componente pode injetar o serviço pela chave, em qualquer ponto da árvore, sem encadeamento de props e sem configuração adicional.
const auth = inject("auth");
auth.login(credentials);Chaves de símbolo para elementos globais
Para serviços disponíveis em todo o app, chaves Symbol exportadas, de preferência tipadas, mantêm a injeção segura e fácil de localizar em toda a base de código.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Ordem de busca
Quando um provide no nível do app e outro no nível do componente usam a mesma chave, o provedor mais próximo vence para os descendentes desse componente. O nível do app funciona como substituto global.
Cenários com muitas leituras
Provide e injeção são excelentes quando muitos componentes apenas leem dados compartilhados, como theme, localidade e config. Os consumidores não precisam escrever dados, portanto o padrão continua simples e previsível.
Comparando com Pinia
Pinia é a biblioteca oficial de gerenciamento de estado do Vue. Ela oferece ferramentas de desenvolvimento, estruturas de estado modulares, ações, valores derivados e depuração com viagem no tempo — ideal para estados globais complexos e alterados com frequência.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Quando provide e injeção são suficientes
Para valores compartilhados principalmente somente para leitura, provide e injeção evitam a sobrecarga de um armazenamento de estado. A solução é mais leve, integrada ao Vue e clara para theme, i18n ou serviços injetados.
Quando recorrer à Pinia
Escolha Pinia quando o estado for alterado em muitos pontos, precisar de ferramentas de desenvolvimento, tiver de ser persistido ou contiver dados derivados complexos. Ela centraliza a lógica melhor do que pares dispersos de provide e injeção.
Combinando os dois
Eles não são mutuamente exclusivos. Você pode usar Pinia para os dados do app e provide e injeção para um contexto leve da árvore de componentes, como um formulário ou um theme da interface.
provide("formContext", { register, errors });Considerações sobre testes
Ao testar unitariamente um componente que faz injeção, forneça o valor por meio das opções de montagem do teste global.provide para que o componente receba um substituto.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Verificação rápida
Quando provide e injeção são preferíveis à Pinia?
Recapitulação
Você aprendeu que app.provide expõe serviços globais para todos os componentes, consumidos pela chave em qualquer ponto por meio de inject. Provide e injeção são ideais para contextos compartilhados com muitas leituras, enquanto Pinia é adequada para estados globais complexos e alterados com frequência, com suporte a ferramentas de desenvolvimento.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Provide/Inject para estado no nível da aplicação” é grátis?
Sim — o texto completo de “Provide/Inject para estado no nível da aplicação” é 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 “Provide/Inject para estado no nível da aplicação”?
app.provide() para estado global, temas, i18n e como evitar Pinia em casos simples. 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 4 de 4.
Quanto tempo leva a aula “Provide/Inject para estado no nível da aplicação”?
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
- O problema da prop drilling
- provide() em componentes pais
- inject() em componentes filhos
- Provide/Inject para estado no nível da aplicação