Vue Academy · Lección

Propiedades globales y provide/inject en plugins

app.config.globalProperties.$myPlugin, app.provide() para inyección y ampliación de tipos de TypeScript

Lección 2 de 413 pasos

Propiedades globales y provide/inject en plugins es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Dos formas de exponer servicios

Los plugins pueden compartir funcionalidad de dos formas: mediante propiedades globales, el estilo clásico de la Options API al que se accede con this.$x, y mediante provide/inject, el estilo de la Composition API. El código moderno prefiere provide/inject; las propiedades globales siguen siendo útiles en bases de código que utilizan la Options API.

app.config.globalProperties

app.config.globalProperties.$http = client hace que this.$http esté disponible en todos los componentes de la Options API. La convención consiste en usar el prefijo $ para evitar conflictos con los datos del componente.

import axios from 'axios'

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

Usar $http en la Options API

Dentro de un componente de la Options API, puede acceder a la propiedad global mediante this.

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

Por qué la Composition API no puede usar this

En <script setup> no existe un this vinculado a la instancia del componente. Por eso this.$http no funciona. En su lugar, la Composition API lee valores inyectados, que es el enfoque recomendado.

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

Usar provide en el plugin

Para admitir la Composition API, el plugin también debe proporcionar mediante app.provide el mismo servicio bajo una clave. Proporcione ambos: una propiedad global para la Options API y un valor proporcionado para la Composition API.

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
  }
}

Usar inject en la Composition API

Los componentes leen el servicio con inject(httpKey). Utilizar la clave Symbol exportada evita errores tipográficos en cadenas y permite la comprobación de tipos.

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

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

Claves de inyección tipadas con InjectionKey

Para obtener una seguridad de tipos completa, tipifique la clave con InjectionKey<T>. De este modo, inject infiere automáticamente el tipo correcto del 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

Tipar $http mediante la ampliación de módulos

Para que this.$http sea seguro con respecto a los tipos, amplíe la interfaz ComponentCustomProperties de Vue en un archivo .d.ts. Así, TypeScript conoce el tipo de this.$http en todas partes.

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

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

export {}

Dónde se encuentra la ampliación

La ampliación debe ser un módulo (observe el export {} final) y debe estar incluida en su tsconfig.json. Colóquela junto al plugin para que los tipos se distribuyan con él al publicarlo.

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

Propiedades globales: úselas con moderación

Las propiedades globales son prácticas, pero introducen dependencias ocultas, lo que dificulta probar los componentes y razonar sobre ellos. Prefiera provide/inject, que es explícito y está limitado al árbol de componentes. Reserve las propiedades globales para utilidades realmente comunes a toda la aplicación y compatibles con la Options API.

Compatibilidad con ambos enfoques

Un plugin bien diseñado admite tanto la Options API como la Composition API: establece una propiedad global Y proporciona el valor, además de incluir la ampliación de tipos para la propiedad global y una clave de inyección tipada. Los consumidores pueden elegir la opción que mejor se adapte al estilo de su componente.

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

Comprobación rápida

Compruebe su comprensión de las propiedades globales y de provide/inject en los plugins.

Responde en la lección interactiva

Resumen

Ha aprendido a exponer servicios desde plugins:

app.config.globalProperties.$http proporciona this.$http para la Options API
La Composition API no tiene this; utiliza inject en su lugar
Proporcione tanto una propiedad global como un valor proporcionado para cubrir ambos enfoques
Tipifique this.$http ampliando ComponentCustomProperties
Use InjectionKey tipada para la ruta de inyección

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Propiedades globales y provide/inject en plugins» es gratis?

Sí — el texto completo de «Propiedades globales y provide/inject en plugins» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Propiedades globales y provide/inject en plugins»?

app.config.globalProperties.$myPlugin, app.provide() para inyección y ampliación de tipos de TypeScript Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Propiedades globales y provide/inject en plugins»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Arquitectura de plugins y app.use()
Propiedades globales y provide/inject en plugins
Ejemplo de plugin de notificaciones y toasts
Publicación y tipado de plugins de Vue

← Volver a Vue Academy