Vue Academy · Lektion

Gemeinsamer Status über Micro-Frontends hinweg

Pinia-Stores gemeinsam nutzen, Event-Bus mit CustomEvent und die URL als gemeinsamen Status verwenden

Lektion 4 von 413 Schritte

Gemeinsamer Status über Micro-Frontends hinweg ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Herausforderung gemeinsamer Zustände

Unabhängige Micro-Frontends müssen sich weiterhin abstimmen: Eine Anmeldung in einem Slice sollte den Header in einem anderen aktualisieren. Eine enge Kopplung würde jedoch den eigentlichen Zweck zunichtemachen. Das Ziel ist eine lose, bewusst gestaltete Kommunikation.

Impliziten globalen Zustand vermeiden

Wenn Sie alles auf window oder in einem riesigen gemeinsamen Store ablegen, stellen Sie die Kopplung des Monolithen wieder her. Bevorzugen Sie explizite, minimale Verträge zwischen Slices, damit sich Teams unabhängig weiterentwickeln können.

CustomEvent für die Kommunikation

Die CustomEvent-API des Browsers ist ein frameworkunabhängiger Bus. Ein Micro-Frontend löst ein Ereignis auf window aus, andere lauschen darauf – gemeinsame Imports sind nicht erforderlich.

const event = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 },
})
window.dispatchEvent(event)

Auf Ereignisse lauschen

Andere Slices abonnieren Ereignisse mit addEventListener und lesen die Nutzdaten aus event.detail. Dadurch werden Sender und Empfänger entkoppelt – sie müssen sich nur auf einen Ereignisnamen und eine Datenstruktur einigen.

window.addEventListener("cart:add", (e) => {
  console.log("Added", e.detail.productId)
})

Listener in Vue aufräumen

Registrieren Sie Listener in onMounted und entfernen Sie sie in onUnmounted, um Leaks und doppelte Handler beim erneuten Mounten von Komponenten zu vermeiden.

import { onMounted, onUnmounted } from "vue"

function onAdd(e) { /* ... */ }
onMounted(() => window.addEventListener("cart:add", onAdd))
onUnmounted(() => window.removeEventListener("cart:add", onAdd))

Ein typisierter Ereignisvertrag

Dokumentieren Sie die Ereignisse als Vertrag, damit jedes Team den Namen und die Struktur der Nutzdaten kennt. Dies ist die öffentliche API zwischen Micro-Frontends.

// events contract
// "cart:add"    -> { productId: number, qty: number }
// "auth:login"  -> { userId: string }
// "auth:logout" -> {}

Die URL als gemeinsamer Zustand

Die URL ist ein natürlicher gemeinsamer Store für Navigation und Filter: Sie ist global, als Lesezeichen speicherbar und jeder Slice kann sie lesen. Legen Sie übergreifenden Zustand wie den aktiven Filter oder die aktuelle Seite in Query-Parameter.

const params = new URLSearchParams(location.search)
const category = params.get("category") // shared across slices

URL-Zustand aktualisieren

Schreiben Sie den gemeinsamen Filter- und Navigationszustand mit der History API in die URL, damit er teilbar bleibt und der Zurück-Button wie erwartet funktioniert. Alle Slices reagieren, indem sie die neue URL lesen.

function setCategory(value) {
  const url = new URL(location.href)
  url.searchParams.set("category", value)
  history.pushState({}, "", url)
}

Singleton-Pinia-Store

Für umfangreicheren gemeinsamen Zustand innerhalb einer einzelnen Seite eignet sich ein Singleton-Pinia-Store – allerdings nur, wenn Pinia über Federation als Singleton geteilt wird, sodass alle Slices dieselbe Instanz verwenden.

// federation config (both sides)
shared: {
  pinia: { singleton: true },
  vue: { singleton: true },
}

Den gemeinsamen Store verwenden

Wenn Pinia als Singleton geteilt wird, ist ein von zwei Slices importierter Store dieselbe Store-Instanz – der von einem Slice geschriebene Zustand wird vom anderen reaktiv gelesen.

// slice A writes
const auth = useAuthStore()
auth.login(user)

// slice B reads the same reactive state
const auth = useAuthStore()
console.log(auth.user)

Eine Strategie wählen

CustomEvent – lose, frameworkunabhängige Benachrichtigungen.
URL – Navigation, Filter und alles, was teilbar oder als Lesezeichen speicherbar sein soll.
Singleton Pinia – umfangreicher reaktiver Zustand innerhalb der Seite; erfordert singleton: true.

Bevorzugen Sie die lose gekoppelte Option, die den Bedarf erfüllt.

Kurzer Check

Überprüfen Sie Ihr Verständnis des Zustands zwischen Micro-Frontends.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben gelernt, Zustand über Micro-Frontends hinweg zu teilen:

Bevorzugen Sie lose, explizite Verträge gegenüber implizitem globalem Zustand.
CustomEvent auf window zusammen mit addEventListener ermöglicht frameworkunabhängige Nachrichten; räumen Sie Listener in onUnmounted auf.
Die URL enthält über die History API teilbaren Navigations- und Filterzustand in Query-Parametern.
Ein Singleton-Pinia-Store teilt umfangreichen reaktiven Zustand, aber nur mit singleton: true in Federation.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Gemeinsamer Status über Micro-Frontends hinweg“ kostenlos?

Ja — der vollständige Text von „Gemeinsamer Status über Micro-Frontends hinweg“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Gemeinsamer Status über Micro-Frontends hinweg“?

Pinia-Stores gemeinsam nutzen, Event-Bus mit CustomEvent und die URL als gemeinsamen Status verwenden Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Gemeinsamer Status über Micro-Frontends hinweg“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Prinzipien der Micro-Frontend-Architektur
Webpack Module Federation mit Vue
Vite Federation Plugin
Gemeinsamer Status über Micro-Frontends hinweg

← Zurück zu Vue Academy