Vue Academy · Aula

Propriedades globais e provide/inject em plugins

app.config.globalProperties.$myPlugin, app.provide() para injeção e extensão de tipos do TypeScript.

Aula 2 de 413 etapas

Propriedades globais e provide/inject em plugins é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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.

Duas maneiras de expor serviços

Os plug-ins podem compartilhar funcionalidades de duas maneiras: propriedades globais (o estilo clássico da API de Opções, acessadas por meio de this.$x) e provide/inject (o estilo da API de Composição). O código moderno favorece provide/inject; as propriedades globais continuam úteis em bases de código que usam a API de Opções.

app.config.globalProperties

app.config.globalProperties.$http = client disponibiliza this.$http em todos os componentes da API de Opções. A convenção é usar o prefixo $ para evitar conflitos com os dados do componente.

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

Usando $http na API de Opções

Dentro de um componente da API de Opções, a propriedade global pode ser acessada por meio de this.

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

Por que a API de Composição não pode usar this

Em <script setup>, não há um this vinculado à instância do componente. Portanto, this.$http não funciona. Em vez disso, a API de Composição lê valores injetados, que é a abordagem recomendada.

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

Fornecendo o serviço no plug-in

Para oferecer suporte à API de Composição, o plug-in também deve usar app.provide para fornecer o mesmo serviço sob uma chave. Forneça ambos: uma propriedade global para a API de Opções e um valor fornecido para a API de Composição.

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

Injetando na API de Composição

Os componentes leem o serviço com inject(httpKey). Usar a chave Symbol exportada evita erros de digitação em chaves de texto e permite a tipagem.

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

Chaves de injeção tipadas com InjectionKey

Para obter segurança de tipos completa, tipifique a chave com InjectionKey<T>. Em seguida, inject infere automaticamente o tipo correto do valor.

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

Tipificando $http com extensão de módulo

Para tornar this.$http seguro quanto aos tipos, estenda a interface ComponentCustomProperties do Vue em um arquivo .d.ts. Assim, o TypeScript conhece o tipo de this.$http em todos os lugares.

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

Onde fica a extensão

A extensão deve ser um módulo (observe o export {} no final) e ser incluída pelo seu tsconfig.json. Coloque-a junto ao seu plug-in para que os tipos sejam distribuídos com ele quando for publicado.

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

Propriedades globais: use com moderação

As propriedades globais são convenientes, mas criam dependências ocultas — elas tornam os componentes mais difíceis de testar e de compreender. Prefira provide/inject (explícitos e limitados ao escopo da árvore). Reserve as propriedades globais para utilitários realmente disponíveis em toda a aplicação e compatíveis com a API de Opções.

Dando suporte aos dois contextos

Um plug-in bem elaborado oferece suporte às APIs de Opções e de Composição: defina uma propriedade global E forneça o valor, além de distribuir uma extensão de tipos para a propriedade global e uma chave de injeção tipada. Os consumidores escolhem o que melhor se adapta ao estilo de seu componente.

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

Verificação rápida

Teste sua compreensão das propriedades globais e de provide/inject nos plug-ins.

Responda na aula interativa

Recapitulação

Você aprendeu a expor serviços de plug-ins:

app.config.globalProperties.$http fornece o this.$http da API de Opções
A API de Composição não tem this; em vez disso, usa inject
Forneça uma propriedade global e um valor fornecido para obter cobertura completa
Tipifique this.$http estendendo ComponentCustomProperties
Use InjectionKey tipada no caminho de injeção

Grátis para começar

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

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Propriedades globais e provide/inject em plugins” é grátis?

Sim — o texto completo de “Propriedades globais e provide/inject em plugins” é 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 “Propriedades globais e provide/inject em plugins”?

app.config.globalProperties.$myPlugin, app.provide() para injeção e extensão de tipos do TypeScript. 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 2 de 4.

Quanto tempo leva a aula “Propriedades globais e provide/inject em plugins”?

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

Arquitetura de plugins e app.use()
Propriedades globais e provide/inject em plugins
Exemplo de plugin de notificações e toasts
Publicação e tipagem de plugins Vue

← Voltar para Vue Academy