11. Projeto [vuejs-09]: Utilização de um plugin [eventBus]

O projeto [vuejs-09] é idêntico ao projeto [vuejs-08], exceto pelo facto de introduzir o conceito de um plugin. A estrutura de diretórios do projeto é a seguinte:

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

O script [./event-bus.js] permanece o mesmo do exemplo anterior:


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

O plugin [./plugins/event-bus.js] é o seguinte:


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

Comentários

Um plugin [Vue] é um objeto com uma função [install] (linha 2). Esta função é chamada automaticamente quando um código declara a utilização do plugin;
linhas 1–9: o objeto exportado pelo script;
linha 2: a função [install] recebe dois parâmetros aqui:
- [Vue]: a função obtida pela instrução [import Vue from ‘Vue’]. Pode ser considerada como uma classe;
- [eventBus]: o objeto exportado pelo script [./event-bus];
linhas 4–7: modificam a definição (conhecida como protótipo) da função [Vue] adicionando-lhe a propriedade [$eventBus]. Se pensarmos em termos de [class], a propriedade [$eventBus] é adicionada à classe [Vue]. Os componentes que são instâncias de [Vue] terão, portanto, acesso a esta nova propriedade;
A linha 6 indica que, quando referenciarmos a propriedade [Vue].$eventBus, obteremos o parâmetro [eventBus] da linha 2. Veremos um pouco mais adiante que este segundo parâmetro será o objeto [eventBus] exportado pelo script [./event-bus.js]. Assim, em última análise, quando um componente C utiliza a expressão [C.$eventBus], irá referenciar o objeto [eventBus] exportado pelo script [./event-bus.js]. Isto evita que tenha de importar o script [./event-bus.js]. Esse é o objetivo do plugin: simplificar o acesso ao objeto [eventBus] exportado pelo script [./event-bus.js];
Note que o plugin não tem de se chamar necessariamente [event-bus.js]. Poderia ter sido chamado [plugin-event-bus], por exemplo;
Note também que o $ em [$eventBus] é uma convenção usada para denotar propriedades [Vue] que foram adicionadas através de plugins. Não é obrigatório seguir esta convenção. Neste texto, iremos segui-la;

11.2. O script principal [main.js]

O script [./plugins/event-bus.js] define um plugin para o framework [Vue.js]. Este plugin ainda não é utilizado, apenas definido. É o script [main.js] que o ativa:


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

Comentários

As linhas 14–16 ativam o plugin [PluginEventBus]. Após a linha 16, todas as instâncias da classe (função) [Vue] têm a propriedade [$eventBus], que aponta para o mesmo objeto exportado pelo script [./event-bus.js]. Este será o caso para todos os componentes do projeto;

11.3. A vista principal [App]

A vista principal [App] permanece a mesma que no projeto anterior.

11.4. O componente [Component1]

O componente [Component1] utiliza agora a sua propriedade [$eventBus] para ouvir o 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>

Comentários

Linha 33, utilização da propriedade [this.$eventBus] do componente. Note-se também que o script na linha 11 já não importa o script [./event-bus.js];

11.5. O componente [Component2]

O componente [Component2] utiliza agora a sua propriedade [$eventBus] para emitir o 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>

Comentários

Linha 13: Utilização da propriedade [this.$eventBus] do componente. Note-se também que o script na linha 7 já não importa o script [./event-bus.js];

11.6. Componente [Component3]

O componente [Component3] tem o mesmo código que o [Component1]. Também escuta o evento [someEvent].

11.7. Executar o projeto

Obtemos os mesmos resultados que no projeto anterior.