0Pricing
Sveltejs Academy · Lektion

Event-Bus-Pattern mit Stores

Implementieren Sie einen globalen Event Bus mithilfe eines Writable Stores für entkoppelte Kommunikation.

Event-Bus-Pattern mit Stores ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.

Event-Bus

Ein Event-Bus ist ein globaler Publish-/Subscribe-Kanal für entkoppelte Kommunikation.

Mit writable implementieren

Ein writable Store, der das jeweils neueste Ereignis enthält, fungiert als einfacher Bus.

const bus = writable(null);
export function emit(event) { bus.set(event); }
export function on(fn) { return bus.subscribe(e => { if (e) fn(e); }); }

Anwendungsfall

Eine Komponente sendet ein Toast-Ereignis. Eine andere abonniert es und zeigt Toasts global an.

Entkopplung

Sender und Empfänger importieren einander nicht. Beide hängen vom Bus ab.

Typsicherheit

Typisieren Sie Ereignisse als diskriminierte Union, damit Abonnenten sicher darauf zugreifen können.

type Event = { type: "toast"; text: string } | { type: "logout" };

Einmalig abonnieren

Kapseln Sie das Abonnement mit dem $-Kurzschreibweisen innerhalb von Komponenten so, dass es automatisch beendet wird.

Mehrere Busse

Trennen Sie die Busse nach Domäne: appBus, modalBus und audioBus, um einen einzigen übergroßen Kanal zu vermeiden.

Anti-Pattern

Eine übermäßige Verwendung von Event-Bussen führt zu einem impliziten Datenfluss. Bevorzugen Sie direkte Props oder Stores, wenn die Zuständigkeit eindeutig ist.

Replay-Semantik

writable Stores enthalten nur den jeweils neuesten Wert. Für den vollständigen Ereignisverlauf verwenden Sie einen Array-Store.

Externe Ereignisse

Ein Event-Bus kann auch Browserereignisse wie das Ändern der Fenstergröße oder Tastenkürzel kapseln.

Testen

Tests können Ereignisse senden und prüfen, ob Abonnenten angemessen reagieren.

Schnelltest

Welchen Vorteil bietet ein Event-Bus?

Zusammenfassung

Erstellen Sie einen einfachen Event-Bus mit einem writable Store. Senden und abonnieren Sie Ereignisse für eine entkoppelte, bereichsübergreifende Kommunikation.

Häufig gestellte Fragen

Ist die Lektion „Event-Bus-Pattern mit Stores“ kostenlos?

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

Was lerne ich in „Event-Bus-Pattern mit Stores“?

Implementieren Sie einen globalen Event Bus mithilfe eines Writable Stores für entkoppelte Kommunikation. Du übst Sveltejs 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 Sveltejs Academy zu starten?

Keine Vorkenntnisse erforderlich. Sveltejs 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 2 von 4.

Wie lange dauert die Lektion „Event-Bus-Pattern mit Stores“?

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 Sveltejs Academy-Lektion Code schreiben und ausführen?

Ja. Jede Sveltejs 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

  1. Store-Architektur: Feature-Module
  2. Event-Bus-Pattern mit Stores
  3. Optimistische UI-Aktualisierungen
  4. Undo/Redo mit Store-Verlauf
← Zurück zu Sveltejs Academy