Provide/Inject para el estado a nivel de aplicación
app.provide() para estado global, theming, i18n y para evitar Pinia en casos sencillos.
Provide/Inject para el estado a nivel de aplicación es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 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.
provide a nivel de aplicación
Además de provide a nivel de componente, puede proporcionar valores en la instancia de la aplicación mediante app.provide. El valor estará disponible para todos los componentes de la aplicación.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Proporcionar servicios globales
El provide a nivel de aplicación es perfecto para singletons como un servicio de autenticación, un cliente HTTP o un logger: elementos que puede necesitar toda la aplicación.
import { authService } from "./auth";
app.provide("auth", authService);Consumir un servicio global
Cualquier componente puede inyectar el servicio mediante su clave desde cualquier lugar del árbol, sin prop drilling ni conexiones adicionales.
const auth = inject("auth");
auth.login(credentials);Claves Symbol para valores globales
Para los servicios disponibles en toda la aplicación, las claves Symbol exportadas, preferiblemente tipadas, mantienen la inyección segura y fácil de localizar en toda la base de código.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Orden de búsqueda
Cuando un provide a nivel de aplicación y otro a nivel de componente utilizan la misma clave, el proveedor más cercano prevalece para los descendientes de ese componente. El provide a nivel de aplicación actúa como fallback global.
Escenarios con muchas lecturas
Provide/inject es excelente cuando muchos componentes solo leen datos compartidos, como el tema, la configuración regional o la configuración de la aplicación. Los consumidores no necesitan escribir en ellos, por lo que el patrón sigue siendo sencillo y predecible.
Comparación con Pinia
Pinia es la biblioteca oficial de Vue para la gestión del estado. Ofrece devtools, stores modulares, acciones, getters y depuración time-travel, por lo que resulta ideal para estados globales complejos que cambian con frecuencia.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Cuándo es suficiente provide/inject
Para valores compartidos principalmente de solo lectura, provide/inject evita la sobrecarga de un store. Es una solución más ligera, integrada en Vue y clara para temas, i18n o servicios inyectados.
Cuándo elegir Pinia
Elija Pinia cuando el estado se modifique desde muchos lugares, necesite devtools, deba persistirse o contenga datos derivados complejos. Centraliza mejor la lógica que las parejas provide/inject dispersas.
Combinar ambos
No son opciones excluyentes. Puede utilizar Pinia para los datos de la aplicación y provide/inject para un contexto ligero del árbol de componentes, como un formulario o un tema de la interfaz.
provide("formContext", { register, errors });Consideraciones sobre las pruebas
Al realizar pruebas unitarias de un componente que utiliza inyección, proporcione el valor mediante la opción de montaje global.provide de la prueba para que el componente reciba un stub.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Comprobación rápida
¿Cuándo se prefiere provide/inject a Pinia?
Repaso
Ha aprendido que app.provide expone servicios globales a todos los componentes, que pueden consumirlos mediante su clave desde cualquier lugar a través de inject. Provide/inject es especialmente útil para contextos compartidos con muchas lecturas, mientras que Pinia se adapta a estados globales complejos y modificados con frecuencia, con compatibilidad para devtools.
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
Preguntas frecuentes
¿La lección «Provide/Inject para el estado a nivel de aplicación» es gratis?
Sí — el texto completo de «Provide/Inject para el estado a nivel de aplicación» 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 «Provide/Inject para el estado a nivel de aplicación»?
app.provide() para estado global, theming, i18n y para evitar Pinia en casos sencillos. 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 4 de 4.
¿Cuánto tiempo toma la lección «Provide/Inject para el estado a nivel de aplicación»?
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
- El problema del prop drilling
- provide() en componentes padre
- inject() en componentes hijo
- Provide/Inject para el estado a nivel de aplicación