Komplexe Webanwendungen mit Vue.js, Teil 2

Inhaltsverzeichnis

Zum Grundprinzip von Vue.js gehört es, dass im Framework nur die zentralen Funktionen gebündelt sind. Dem Prinzip folgend, sind State Management und Routing ausgelagert, da nicht jede Anwendung sie braucht. Für kleinere Anwendungen kann es ausreichend sein, dass die Komponenten untereinander Daten und Ereignisse austauschen. Schnell kommt das Konzept aber an seine Grenzen, weshalb eine größere Antwort gefordert ist.

Komponentenkommunikation

Obwohl es mit der Vue.js-API möglich ist, auf die übergeordnete Komponenten direkt zuzugreifen (über this.$parent), sollte man es vermeiden. Die Kommunikation über Props und Events ist sinnvoller. Props geben Daten in eine Komponente hinein, und per Events kann die Komponente Daten und Ereignisse zurückgeben. Wie in Teil 1 der Serie gezeigt, behandelt Vue.js Events einer Child-Component dann analog zu Standard-DOM-Events und registriert einen Handler.

Diese Art der Kommunikation ermöglicht aber nur den Austausch von Daten entlang der Komponentenhierarchie. Sie ist bei einem großen Komponentenbaum schnell unübersichtlich. Eine häufig anzutreffende Alternative ist der Einsatz eines Event-Bus. Dazu erzeugt man eine Vue-Instanz und nutzt deren Funktionen zur Registrierung von Event-Handlern und Veröffentlichung von Ereignissen. Alle betroffenen Komponenten importieren die Instanz, registrieren ihre Event-Handler und veröffentlichen eigene Ereignisse. In folgendem Beispiel wird eine Vue-Instanz erzeugt und exportiert:

export const EventBus = new Vue()

Eine anderen Komponente importiert die Instanz und registriert eine Callback-Funktion für das Ereignis someEvent:

import { EventBus } from './main'
    
export default {
  created() {
    EventBus.$on('someEvent',someValue => {
      console.log(`Event 'someEvent' called with value '${someValue}'`)
    })
  }
}

An beliebiger anderer Stelle der Anwendung kann nun der Event-Bus ein Ereignis veröffentlichen:

EventBus.$emit('someEvent','myCurrentValue')

Vue.js ruft alle Callback-Funktionen, die auf dem Event-Bus registriert sind, auf und übergibt ihnen den Wert als Parameter. Im Beispiel führt das zur Ausgabe:

Event 'someEvent' called with value 'myCurrentValue'.

Solange eine Anwendung nur das Teilen weniger Zustandsinformationen erfordert, funktioniert der Ansatz gut. Bei komplexen Anwendungen kommt er an seine Grenzen. Um den lokalen Zustand diverser Komponenten synchron zu halten, wären je nach Anwendungsfall viele Ereignisse notwendig. Das sorgt für Unübersichtlichkeit in den Kommunikationsbeziehungen und gestaltet die Fehlersuche schwierig. Eine Alternative dafür ist der Einsatz eines zentralen State Management mit Vuex.