11. Projekt [vuejs-09]: Verwendung eines Plugins [eventBus]

Das Projekt [vuejs-09] ist identisch mit dem Projekt [vuejs-08], mit dem Unterschied, dass es das Konzept des Plugins einführt. Die Projektstruktur sieht wie folgt aus:

11.1. Das Plugin [./plugins/event-bus]

Das Skript [./event-bus.js] bleibt unverändert gegenüber dem vorherigen Beispiel:


import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;

Das Plugin [./plugins/event-bus.js] sieht wie folgt aus:


export default {
  install(Vue, eventBus) {
    // Fügt der Klasse „Vue“ die Eigenschaft [$eventBus] hinzu
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // Wenn auf „Vue.$eventBus“ verwiesen wird, wird der zweite Parameter „[eventBus]“ zurückgegeben
      get: () => eventBus,
    })
  }
}

Kommentare

Ein Plugin [Vue] ist ein Objekt mit einer Funktion [install] (Zeile 2). Diese wird automatisch aufgerufen, wenn in einem Code die Verwendung des Plugins deklariert wird;
Zeilen 1–9: Das vom Skript exportierte Objekt;
Zeile 2: Die Funktion [install] akzeptiert hier zwei Parameter:
- [Vue]: die durch die Anweisung [import Vue from ‘Vue’] erzeugte Funktion. Kann mit einer Klasse verglichen werden;
- [eventBus]: das vom Skript [./event-bus] exportierte Objekt;
Zeilen 4–7: Ändern die Definition (man spricht vom Prototyp) der Funktion [Vue], indem sie die Eigenschaft [$eventBus] hinzufügen. Bezieht man sich auf den Begriff [classe], wird die Eigenschaft [$eventBus] der Klasse [Vue] hinzugefügt. Komponenten, die Instanzen von [Vue] sind, haben somit Zugriff auf diese neue Eigenschaft;
Zeile 6 gibt an, dass beim Verweisen auf die Eigenschaft [Vue].$eventBus der Parameter [eventBus] aus Zeile 2 zurückgegeben wird. Wir werden etwas später sehen, dass dieser zweite Parameter das Objekt [eventBus] ist, das vom Skript [./event-bus.js] exportiert wird. Wenn also letztendlich eine C-Komponente den Ausdruck [C.$eventBus] verwendet, verweist sie auf das Objekt [eventBus], das vom Skript [./event-bus.js] exportiert wurde. Dadurch wird vermieden, dass das Skript [./event-bus.js] importiert werden muss. Darin liegt der Vorteil des Plugins: Es vereinfacht den Zugriff auf das Objekt [eventBus], das vom Skript [./event-bus.js] exportiert wird;
Es sei angemerkt, dass das Plugin nicht unbedingt selbst [event-bus.js] heißen muss. Man hätte es beispielsweise auch [plugin-event-bus] nennen können;
Es sei außerdem angemerkt, dass das Zeichen $ in [$eventBus] eine Konvention ist, um die Eigenschaften von [Vue] zu kennzeichnen, die über Plugins hinzugefügt wurden. Diese Konvention muss nicht unbedingt befolgt werden. In diesem Text werden wir sie jedoch befolgen;

11.2. Das Hauptskript [main.js]

Das Skript [./plugins/event-bus.js] definiert ein Plugin für das Framework [Vue.js]. Dieses Plugin wird noch nicht verwendet, sondern lediglich definiert. Es wird durch das Skript [main.js] aktiviert:


// Importe
import Vue from 'vue'
import App from './App.vue'

// Plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// eventbus
import eventBus from './event-bus';
import PluginEventBus from './plugins/event-bus';
Vue.use(PluginEventBus, eventBus);

// Konfiguration
Vue.config.productionTip = false

// Projektinstanziierung [App]
new Vue({
  render: h => h(App),
}).$mount('#App')

Kommentare

Die Zeilen 14–16 aktivieren das Plugin [PluginEventBus]. Nach Zeile 16 besitzen alle Instanzen der Klasse (Funktion) [Vue] die Eigenschaft [$eventBus], die jeweils auf dasselbe Objekt verweist, das vom Skript [./event-bus.js] exportiert wird. Dies gilt für jede Komponente des Projekts;

11.3. Die Hauptansicht [App]

Die Hauptansicht [App] bleibt unverändert gegenüber dem vorherigen Projekt.

11.4. Die Komponente [Component1]

Die Komponente [Component1] nutzt nun ihre Eigenschaft [$eventBus], um das Ereignis [someEvent] abzufangen:


<template>
  <b-row>
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Evénement [someEvent] intercepté par [Component1]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "component1",
    // Komponentenstatus
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // Methoden zur Ereignisverwaltung
    methods: {
      // Ereignisverwaltung [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // Lebenszyklusverwaltung der Komponente
    // Ereignis [created] – Die Komponente wurde erstellt
    created() {
      // Abhören des Ereignisses [someEvent]
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Anmerkungen

Zeile 33: Verwendung der Eigenschaft [this.$eventBus] der Komponente. Außerdem ist zu beachten, dass das Skript in Zeile 11 das Skript [./event-bus.js] nicht mehr importiert;

11.5. Die Komponente [Component2]

Die Komponente [Component2] verwendet nun ihre Eigenschaft [$eventBus], um das Ereignis [someEvent] auszulösen:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- Skript -->
<script>
  export default {
    name: "component2",
    // Methoden zur Ereignisverwaltung
    methods: {
      createEvent() {
        this.$eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Anmerkungen

Zeile 13: Verwendung der Eigenschaft [this.$eventBus] der Komponente. Außerdem ist zu beachten, dass das Skript in Zeile 7 das Skript [./event-bus.js] nicht mehr importiert;

11.6. Komponente [Component3]

Die Komponente [Component3] hat denselben Code wie [Component1]. Auch sie überwacht das Ereignis [someEvent].

11.7. Ausführung des Projekts

Man erhält dieselben Ergebnisse wie im vorherigen Projekt.