11. project [vuejs-09]: gebruik van een plug-in [eventBus]

Het project [vuejs-09] is identiek aan het project [vuejs-08], met als enige verschil dat het het begrip ‘plug-in’ introduceert. De projectstructuur is als volgt:

11.1. De plug-in [./plugins/event-bus]

Het script [./event-bus.js] blijft hetzelfde als in het vorige voorbeeld:


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

De plug-in [./plugins/event-bus.js] ziet er als volgt uit:


export default {
  install(Vue, eventBus) {
    // voegt een eigenschap [$eventBus] toe aan de klasse Vue
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // wanneer er naar Vue.$eventBus wordt verwezen, wordt de tweede parameter [eventBus] weergegeven
      get: () => eventBus,
    })
  }
}

Opmerkingen

een plug-in [Vue] is een object met een functie [install] (regel 2). Deze functie wordt automatisch aangeroepen wanneer in een code het gebruik van de plug-in wordt aangegeven;
regels 1-9: het object dat door het script wordt geëxporteerd;
regel 2: de functie [install] accepteert hier twee parameters:
- [Vue]: de functie die wordt verkregen via de instructie [import Vue from ‘Vue’]. Kan worden vergeleken met een klasse;
- [eventBus]: het object dat door het script [./event-bus] wordt geëxporteerd;
regels 4-7: wijzigen de definitie (ook wel het prototype genoemd) van de functie [Vue] door de eigenschap [$eventBus] toe te voegen. Als we uitgaan van de term [classe], wordt de eigenschap [$eventBus] toegevoegd aan de klasse [Vue]. Componenten die instanties zijn van [Vue] zullen dus toegang hebben tot deze nieuwe eigenschap;
regel 6 geeft aan dat wanneer naar de eigenschap [Vue].$eventBus wordt verwezen, de parameter [eventBus] uit regel 2 wordt verkregen. We zullen verderop zien dat deze tweede parameter het object [eventBus] is, dat door het script [./event-bus.js] wordt geëxporteerd. Dus uiteindelijk, wanneer een C-component de uitdrukking [C.$eventBus] gebruikt, zal deze verwijzen naar het object [eventBus] dat door het script [./event-bus.js] wordt geëxporteerd. Hierdoor hoeft het script [./event-bus.js] niet te worden geïmporteerd. Daarin ligt het voordeel van de plug-in: het vereenvoudigen van de toegang tot het object [eventBus] dat door het script [./event-bus.js] wordt geëxporteerd;
merk op dat de plug-in niet per se [event-bus.js] hoeft te heten. We hadden hem bijvoorbeeld ook [plugin-event-bus] kunnen noemen;
merk ook op dat de term $ in [$eventBus] een conventie is om de eigenschappen van [Vue] aan te duiden die via plug-ins zijn toegevoegd. Het is niet verplicht om deze conventie te volgen. In deze tekst zullen we ons er wel aan houden;

11.2. Het hoofdscript [main.js]

Het script [./plugins/event-bus.js] definieert een plug-in voor het framework [Vue.js]. Deze plug-in wordt nog niet gebruikt, maar is alleen gedefinieerd. Het is het script [main.js] dat deze activeert:


// 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);

// configuratie
Vue.config.productionTip = false

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

Opmerkingen

de regels 14-16 activeren de plug-in [PluginEventBus]. Na regel 16 beschikken alle instanties van de klasse (functie) [Vue] over de eigenschap [$eventBus], die voor elk van hen verwijst naar hetzelfde object dat door het script [./event-bus.js] wordt geëxporteerd. Dit geldt voor alle componenten van het project;

11.3. De hoofdweergave [App]

De hoofdweergave [App] blijft hetzelfde als in het vorige project.

11.4. De component [Component1]

De component [Component1] gebruikt nu zijn eigenschap [$eventBus] om te luisteren naar de gebeurtenis [someEvent]:


<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",
    // status van de component
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // methoden voor gebeurtenisbeheer
    methods: {
      // gebeurtenisbeheer [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // beheer van de levenscyclus van de component
    // gebeurtenis [created] – de component is aangemaakt
    created() {
      // luisteren naar de gebeurtenis [someEvent]
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Opmerkingen

regel 33, gebruik van de eigenschap [this.$eventBus] van de component. Merk bovendien op dat het script op regel 11 het script [./event-bus.js] niet meer importeert;

11.5. De component [Component2]

De component [Component2] gebruikt nu zijn eigenschap [$eventBus] om de gebeurtenis [someEvent] te genereren:


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

Opmerkingen

regel 13, gebruik van de eigenschap [this.$eventBus] van de component. Merk bovendien op dat het script op regel 7 het script [./event-bus.js] niet meer importeert;

11.6. Component [Component3]

De component [Component3] heeft dezelfde code als [Component1]. Ook deze luistert naar de gebeurtenis [someEvent].

11.7. Het project uitvoeren

We krijgen dezelfde resultaten als in het vorige project.