Estado compartido entre microfrontends
Compartir stores de Pinia, bus de eventos mediante CustomEvent y URL como estado compartido
Estado compartido entre microfrontends 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.
El desafío del estado compartido
Los microfrontends independientes aún necesitan coordinarse: un inicio de sesión en un segmento debe actualizar el encabezado de otro. Sin embargo, un acoplamiento estrecho contradice el propósito. El objetivo es una comunicación flexible y deliberada.
Evitar el estado global implícito
Volcarlo todo en window o en un store compartido enorme recrea el acoplamiento del monolito. Prefiera contratos explícitos y mínimos entre segmentos para que los equipos puedan evolucionar de forma independiente.
CustomEvent para la comunicación
La API CustomEvent del navegador es un bus independiente del framework. Un microfrontend despacha un evento en window y los demás lo escuchan, sin necesidad de importaciones compartidas.
const event = new CustomEvent("cart:add", {
detail: { productId: 42, qty: 1 },
})
window.dispatchEvent(event)Escuchar eventos
Los demás segmentos se suscriben con addEventListener y leen la carga útil de event.detail. Esto desacopla al emisor del receptor: solo tienen que acordar el nombre y la estructura del evento.
window.addEventListener("cart:add", (e) => {
console.log("Added", e.detail.productId)
})Limpiar listeners en Vue
Registre los listeners en onMounted y elimínelos en onUnmounted para evitar fugas y controladores duplicados cuando los componentes se monten de nuevo.
import { onMounted, onUnmounted } from "vue"
function onAdd(e) { /* ... */ }
onMounted(() => window.addEventListener("cart:add", onAdd))
onUnmounted(() => window.removeEventListener("cart:add", onAdd))Un contrato de eventos tipado
Documente los eventos como un contrato para que cada equipo conozca el nombre y la estructura de la carga útil. Esta es la API pública entre los microfrontends.
// events contract
// "cart:add" -> { productId: number, qty: number }
// "auth:login" -> { userId: string }
// "auth:logout" -> {}La URL como estado compartido
La URL es un almacén compartido natural para la navegación y los filtros: es global, se puede guardar en marcadores y todos los segmentos pueden leerla. Coloque en los parámetros de consulta el estado transversal, como el filtro activo o la página actual.
const params = new URLSearchParams(location.search)
const category = params.get("category") // shared across slicesActualizar el estado de la URL
Escriba el estado compartido de filtros y navegación en la URL mediante la History API para que siga siendo fácil de compartir y compatible con el botón Atrás. Todos los segmentos reaccionan leyendo la nueva URL.
function setCategory(value) {
const url = new URL(location.href)
url.searchParams.set("category", value)
history.pushState({}, "", url)
}Store singleton de Pinia
Para un estado compartido más completo dentro de una sola página, funciona un store singleton de Pinia, pero solo si Pinia se comparte como singleton mediante la federación para que todos los segmentos utilicen la misma instancia.
// federation config (both sides)
shared: {
pinia: { singleton: true },
vue: { singleton: true },
}Usar el store compartido
Cuando Pinia se comparte como singleton, el store que importan dos segmentos es la misma instancia de store: el estado que uno escribe lo lee el otro de forma reactiva.
// slice A writes
const auth = useAuthStore()
auth.login(user)
// slice B reads the same reactive state
const auth = useAuthStore()
console.log(auth.user)Elegir una estrategia
- CustomEvent: notificaciones flexibles e independientes del framework.
- URL: navegación, filtros y cualquier dato que se pueda compartir o guardar en marcadores.
- Pinia singleton: estado reactivo completo dentro de la página; requiere
singleton: true.
Prefiera la opción menos acoplada que satisfaga la necesidad.
Comprobación rápida
Compruebe su comprensión del estado compartido entre microfrontends.
Resumen
Aprendió a compartir el estado entre microfrontends:
- Prefiera contratos flexibles y explícitos en lugar de un estado global implícito.
- CustomEvent en
windowjunto conaddEventListenerproporciona mensajería independiente del framework; limpie los listeners enonUnmounted. - La URL (parámetros de consulta mediante la History API) mantiene el estado compartible de navegación y filtros.
- Un store singleton de Pinia comparte un estado reactivo completo, pero solo con
singleton: trueen la federación.
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 «Estado compartido entre microfrontends» es gratis?
Sí — el texto completo de «Estado compartido entre microfrontends» 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 «Estado compartido entre microfrontends»?
Compartir stores de Pinia, bus de eventos mediante CustomEvent y URL como estado compartido 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 «Estado compartido entre microfrontends»?
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
- Principios de arquitectura de microfrontends
- Module Federation de Webpack con Vue
- Plugin de Federation para Vite
- Estado compartido entre microfrontends