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 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) {
    // aggiunge una proprietà [$eventBus] alla classe Vue
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // quando viene fatto riferimento a Vue.$eventBus, si restituisce il secondo parametro [eventBus]
      get: () => eventBus,
    })
  }
}

Commenti

un plugin [Vue] è un oggetto dotato di una funzione [install] (riga 2). Questa verrà richiamata automaticamente quando un codice dichiara l'utilizzo 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 assimilata a una classe;
- [eventBus]: l'oggetto esportato dallo script [./event-bus];
righe 4-7: modificano la definizione (detta prototipo) della funzione [Vue] aggiungendovi la proprietà [$eventBus]. Se si considera il termine [classe], 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 si farà riferimento alla proprietà [Vue].$eventBus, si otterrà il parametro [eventBus] della riga 2. Vedremo più avanti che questo secondo parametro sarà l’oggetto [eventBus] esportato dallo script [./event-bus.js]. Quindi, in definitiva, quando un componente C utilizzerà l’espressione [C.$eventBus], farà riferimento all’oggetto [eventBus] esportato dallo script [./event-bus.js]. Ciò gli eviterà di importare lo script [./event-bus.js]. Il vantaggio del plugin sta proprio qui: semplificare l’accesso all’oggetto [eventBus] esportato dallo script [./event-bus.js];
si noti che il plugin non deve necessariamente chiamarsi [event-bus.js]. Si sarebbe potuto chiamare, ad esempio, [plugin-event-bus];
si noti inoltre che il simbolo $ in [$eventBus] è una convenzione per indicare le proprietà di [Vue] che sono state aggiunte tramite plugin. Non è obbligatorio 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:


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

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

// configurazione
Vue.config.productionTip = false

// istanziazione progetto [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] possiedono la proprietà [$eventBus] che, per ciascuna di esse, punta allo stesso oggetto esportato dallo script [./event-bus.js]. Questo vale per ciascuno dei componenti del progetto;

11.3. La vista principale [App]

La vista principale [App] rimane invariata rispetto al progetto precedente.

11.4. Il componente [Component1]

Il componente [Component1] utilizza ora 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",
    // stato del componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // metodi di gestione degli eventi
    methods: {
      // gestione dell'evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestione del ciclo di vita del componente
    // evento [created] - il componente è stato creato
    created() {
      // ascolto dell'evento [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] utilizza ora la propria proprietà [$eventBus] per generare l'evento [someEvent]:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- script -->
<script>
  export default {
    name: "component2",
    // metodi di gestione degli eventi
    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]. Anch’esso ascolta l’evento [someEvent].

11.7. Esecuzione del progetto

Si ottengono gli stessi risultati del progetto precedente.