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

Das Projekt [vuejs-09] ist identisch mit dem Projekt [vuejs-08], mit dem Unterschied, dass es das Konzept eines Plugins einführt. Die Verzeichnisstruktur des Projekts 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) {
    // ajoute une propriété [$eventBus] à la classe Vue
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // lorsque Vue.$eventBus est référencé, on rend le 2ième paramètre [eventBus]
      get: () => eventBus,
    })
  }
}

Kommentare

Ein [Vue]-Plugin ist ein Objekt mit einer [install]-Funktion (Zeile 2). Diese Funktion wird automatisch aufgerufen, wenn ein Code die Verwendung des Plugins deklariert;
Zeilen 1–9: das vom Skript exportierte Objekt;
Zeile 2: Die [install]-Funktion nimmt hier zwei Parameter entgegen:
- [Vue]: die durch die Anweisung [import Vue from ‘Vue’] erhaltene Funktion. Kann als Klasse betrachtet werden;
- [eventBus]: das vom Skript [./event-bus] exportierte Objekt;
Zeilen 4–7: Ändern Sie die Definition (auch als Prototyp bezeichnet) der [Vue]-Funktion, indem Sie ihr die Eigenschaft [$eventBus] hinzufügen. Wenn wir in Begriffen der [Klasse] denken, wird die Eigenschaft [$eventBus] der [Vue]-Klasse hinzugefügt. Komponenten, die Instanzen von [Vue] sind, haben daher Zugriff auf diese neue Eigenschaft;
Zeile 6 gibt an, dass wir, wenn wir auf die Eigenschaft [Vue].$eventBus verweisen, den Parameter [eventBus] aus Zeile 2 erhalten. Wir werden etwas später sehen, dass dieser zweite Parameter das vom Skript [./event-bus.js] exportierte Objekt [eventBus] sein wird. Wenn also eine Komponente C den Ausdruck [C.$eventBus] verwendet, verweist sie letztendlich auf das vom Skript [./event-bus.js] exportierte [eventBus]-Objekt. Dadurch muss sie das Skript [./event-bus.js] nicht importieren. Das ist der Sinn des Plugins: den Zugriff auf das vom Skript [./event-bus.js] exportierte Objekt [eventBus] zu vereinfachen;
Beachten Sie, dass das Plugin selbst nicht unbedingt [event-bus.js] heißen muss. Es hätte beispielsweise auch [plugin-event-bus] heißen können;
Beachten Sie außerdem, dass das $ in [$eventBus] eine Konvention ist, die verwendet wird, um [Vue]-Eigenschaften zu kennzeichnen, die über Plugins hinzugefügt wurden. Sie sind nicht verpflichtet, dieser Konvention zu folgen. In diesem Text werden wir sie befolgen;

11.2. Das Hauptskript [main.js]

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


// imports
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);
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

Kommentare

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

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 auf das Ereignis [someEvent] zu warten:


<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",
    // component status
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // event management methods
    methods: {
      // evt management [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // component lifecycle management
    // évt [created] - the component has been created
    created() {
      // listen to event [someEvent]
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Kommentare

Zeile 33, Verwendung der Eigenschaft [this.$eventBus] der Komponente. Beachten Sie außerdem, 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>
<!-- script -->
<script>
  export default {
    name: "component2",
    // méthodes de gestion des évts
    methods: {
      createEvent() {
        this.$eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Kommentare

Zeile 13: Verwendung der Eigenschaft [this.$eventBus] der Komponente. Beachten Sie außerdem, 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]. Sie überwacht ebenfalls das Ereignis [someEvent].

11.7. Ausführen des Projekts

Wir erhalten die gleichen Ergebnisse wie im vorherigen Projekt.