11. Progetto [vuejs-09]: Utilizzo di un plugin [eventBus]

Il progetto [vuejs-09] è identico al progetto [vuejs-08], tranne per il fatto che introduce il concetto di plugin. La struttura delle directory del progetto è la seguente:

11.1. Il plugin [./plugins/event-bus]

Lo script [./event-bus.js] rimane lo stesso dell'esempio precedente:


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

Il plugin [./plugins/event-bus.js] è il seguente:


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,
    })
  }
}

Commenti

Un plugin [Vue] è un oggetto con una funzione [install] (riga 2). Questa funzione viene chiamata automaticamente quando un codice dichiara l'uso del plugin;
righe 1–9: l'oggetto esportato dallo script;
riga 2: la funzione [install] accetta qui due parametri:
- [Vue]: la funzione ottenuta dall'istruzione [import Vue from ‘Vue’]. Può essere considerata come una classe;
- [eventBus]: l'oggetto esportato dallo script [./event-bus];
righe 4–7: modificano la definizione (nota come prototipo) della funzione [Vue] aggiungendovi la proprietà [$eventBus]. Se pensiamo in termini di [class], la proprietà [$eventBus] viene aggiunta alla classe [Vue]. I componenti che sono istanze di [Vue] avranno quindi accesso a questa nuova proprietà;
La riga 6 indica che quando facciamo riferimento alla proprietà [Vue].$eventBus, otterremo il parametro [eventBus] dalla riga 2. Vedremo poco più avanti che questo secondo parametro sarà l'oggetto [eventBus] esportato dallo script [./event-bus.js]. Quindi, in definitiva, quando un componente C utilizza l'espressione [C.$eventBus], farà riferimento all'oggetto [eventBus] esportato dallo script [./event-bus.js]. Questo gli eviterà di dover importare lo script [./event-bus.js]. Questo è lo scopo del plugin: semplificare l'accesso all'oggetto [eventBus] esportato dallo script [./event-bus.js];
Si noti che il plugin non deve necessariamente chiamarsi [event-bus.js]. Avrebbe potuto chiamarsi [plugin-event-bus], ad esempio;
Si noti inoltre che il simbolo $ in [$eventBus] è una convenzione utilizzata per indicare le proprietà [Vue] che sono state aggiunte tramite plugin. Non è necessario seguire questa convenzione. In questo testo, la seguiremo;

11.2. Lo script principale [main.js]

Lo script [./plugins/event-bus.js] definisce un plugin per il framework [Vue.js]. Questo plugin non è ancora utilizzato, ma solo definito. È lo script [main.js] che lo attiva:


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

Commenti

Le righe 14–16 attivano il plugin [PluginEventBus]. Dopo la riga 16, tutte le istanze della classe (funzione) [Vue] dispongono della proprietà [$eventBus], che punta allo stesso oggetto esportato dallo script [./event-bus.js]. Questo vale per ogni componente del progetto;

11.3. La vista principale [App]

La vista principale [App] rimane la stessa del progetto precedente.

11.4. Il componente [Component1]

Il componente [Component1] ora utilizza la sua proprietà [$eventBus] per ascoltare l'evento [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",
    // 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>

Commenti

Riga 33, utilizzo della proprietà [this.$eventBus] del componente. Si noti inoltre che lo script alla riga 11 non importa più lo script [./event-bus.js];

11.5. Il componente [Component2]

Il componente [Component2] ora utilizza la sua proprietà [$eventBus] per emettere l'evento [someEvent]:


<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>

Commenti

Riga 13: Utilizzo della proprietà [this.$eventBus] del componente. Si noti inoltre che lo script alla riga 7 non importa più lo script [./event-bus.js];

11.6. Componente [Component3]

Il componente [Component3] ha lo stesso codice di [Component1]. Inoltre, ascolta l'evento [someEvent].

11.7. Esecuzione del progetto

Otteniamo gli stessi risultati del progetto precedente.