11. Проект [vuejs-09]: використання плагіна [eventBus]

Проєкт [vuejs-09] ідентичний проєкту [vuejs-08], за винятком того, що в ньому введено поняття плагіна. Структура проєкту така:

11.1. Плагін [./plugins/event-bus]

Скрипт [./event-bus.js] залишається таким самим, як у попередньому прикладі:


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

Плагін [./plugins/event-bus.js] має такий вигляд:


export default {
  install(Vue, eventBus) {
    // додає властивість [$eventBus] до класу Vue
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // при зверненні до Vue.$eventBus повертається другий параметр [eventBus]
      get: () => eventBus,
    })
  }
}

Коментарі

плагін [Vue] — це об’єкт, що має функцію [install] (рядок 2). Ця функція автоматично викликається, коли в коді заявляється використання плагіна;
рядки 1–9: об’єкт, що експортується скриптом;
рядок 2: функція [install] приймає тут два параметри:
- [Vue]: функція, отримана за допомогою інструкції [import Vue from ‘Vue’]. Може розглядатися як клас;
- [eventBus]: об’єкт, експортований скриптом [./event-bus];
рядки 4–7: змінюють визначення (так званий прототип) функції [Vue], додаючи до неї властивість [$eventBus]. Якщо розглядати термін [classe], то властивість [$eventBus] додається до класу [Vue]. Отже, компоненти, які є екземплярами [Vue], матимуть доступ до цієї нової властивості;
у рядку 6 вказано, що при зверненні до властивості [Vue].$eventBus буде отримано параметр [eventBus] із рядка 2. Трохи далі ми побачимо, що цим другим параметром буде об’єкт [eventBus], експортований скриптом [./event-bus.js]. Отже, у підсумку, коли компонент C використовуватиме вираз [C.$eventBus], він буде посилатися на об’єкт [eventBus], експортований скриптом [./event-bus.js]. Це дозволить йому уникнути імпорту скрипта [./event-bus.js]. У цьому і полягає перевага плагіна: спростити доступ до об’єкта [eventBus], експортованого скриптом [./event-bus.js];
зазначимо, що сам плагін не обов’язково має називатися [event-bus.js]. Його можна було б назвати, наприклад, [plugin-event-bus];
також слід зауважити, що символ $ у [$eventBus] є умовною позначкою для властивостей [Vue], які були додані за допомогою плагінів. Дотримуватися цієї умовної позначки не обов’язково. У цьому тексті ми будемо її дотримуватися;

11.2. Головний скрипт [main.js]

Скрипт [./plugins/event-bus.js] визначає плагін для фреймворку [Vue.js]. Цей плагін поки що не використовується, а лише визначений. Його активує скрипт [main.js]:


// імпортується
import Vue from 'vue'
import App from './App.vue'

// плагіни
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);

// конфігурація
Vue.config.productionTip = false

// інстанціювання проєкту [App]
new Vue({
  render: h => h(App),
}).$mount('#додаток')

Коментарі

рядки 14–16 активують плагін [PluginEventBus]. Після рядка 16 усі екземпляри класу (функції) [Vue] мають властивість [$eventBus], яка для кожного з них вказує на один і той самий об’єкт, експортований скриптом [./event-bus.js]. Це стосуватиметься кожного з компонентів проєкту;

11.3. Головний вигляд [App]

Головний вигляд [App] залишається таким самим, як і в попередньому проєкті.

11.4. Компонент [Component1]

Компонент [Component1] тепер використовує свою властивість [$eventBus] для обробки події [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",
    // стан компонента
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // методи управління подіями
    methods: {
      // управління подією [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // управління життєвим циклом компонента
    // подія [created] — компонент створено
    created() {
      // обслуговування події [someEvent]
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Коментарі

у рядку 33 використовується властивість [this.$eventBus] компонента. Крім того, слід зауважити, що скрипт у рядку 11 більше не імпортує скрипт [./event-bus.js];

11.5. Компонент [Component2]

Компонент [Component2] тепер використовує свою властивість [$eventBus] для генерації події [someEvent]:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- скрипт -->
<script>
  export default {
    name: "component2",
    // методи обробки подій
    methods: {
      createEvent() {
        this.$eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Коментарі

рядок 13, використання властивості [this.$eventBus] компонента. Крім того, слід зауважити, що скрипт у рядку 7 більше не імпортує скрипт [./event-bus.js];

11.6. Компонент [Component3]

Компонент [Component3] має той самий код, що й [Component1]. Він також обробляє подію [someEvent].

11.7. Виконання проєкту

Отримуємо ті самі результати, що й у попередньому проєкті.