11. projeto [vuejs-09]: utilização de um plugin [eventBus]

O projeto [vuejs-09] é idêntico ao projeto [vuejs-08], com a única diferença de que introduz o conceito de plugin. A estrutura do projeto é a seguinte:

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

O script [./event-bus.js] mantém-se tal como no 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) {
    // adiciona uma propriedade [$eventBus] à classe Vue
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // quando Vue.$eventBus é referenciado, o segundo parâmetro é definido como [eventBus]
      get: () => eventBus,
    })
  }
}

Comentários

Um plugin [Vue] é um objeto com uma função [install] (linha 2). Esta função será chamada automaticamente quando um código declarar a utilização do plugin;
linhas 1-9: o objeto exportado pelo script;
linha 2: a função [install] aceita aqui dois parâmetros:
- [Vue]: a função obtida pela instrução [import Vue from ‘Vue’]. Pode ser equiparada a uma classe;
- [eventBus]: o objeto exportado pelo script [./event-bus];
linhas 4-7: alteram a definição (também designada por protótipo) da função [Vue], adicionando-lhe a propriedade [$eventBus]. Se considerarmos o termo [classe], 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, ao referenciar a propriedade [Vue].$eventBus, obter-se-á o parâmetro [eventBus] da linha 2. Veremos mais adiante que este segundo parâmetro será o objeto [eventBus] exportado pelo script [./event-bus.js]. Assim, no final, quando um componente C utilizar a expressão [C.$eventBus], estará a referenciar o objeto [eventBus] exportado pelo script [./event-bus.js]. Isto evitará que tenha de importar o script [./event-bus.js]. É aí que reside o interesse do plugin: simplificar o acesso ao objeto [eventBus] exportado pelo script [./event-bus.js];
note-se que o plugin não tem de se chamar [event-bus.js]. Poderia ter-se chamado [plugin-event-bus], por exemplo;
note-se também que o termo $ em [$eventBus] é uma convenção para designar as propriedades de [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:


// importações
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);

// configuração
Vue.config.productionTip = false

// instanciação do projeto [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] possuem a propriedade [$eventBus], que, para cada uma delas, aponta para o mesmo objeto exportado pelo script [./event-bus.js]. Este será o caso para cada um dos componentes do projeto;

11.3. A vista principal [App]

A vista principal [App] mantém-se tal como estava 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",
    // estado do componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // métodos de gestão de eventos
    methods: {
      // gestão do evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestão do ciclo de vida do componente
    // evento [created] — o componente foi criado
    created() {
      // escuta do evento [someEvent]
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Comentários

linha 33, utilização da propriedade [this.$eventBus] do componente. Note-se ainda que o script da 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étodos de gestão de eventos
    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 ainda que o script da 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]. Este também escuta o evento [someEvent].

11.7. Execução do projeto

Obtêm-se os mesmos resultados que no projeto anterior.