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] (خط ۲) می‌باشد. این تابع به طور خودکار زمانی فراخوانی می‌شود که یک قطعه کد اعلام کند که از افزونه استفاده می‌کند؛
• خطوط ۱–۹: ابجکتی که توسط اسکریپت صادر شده است؛
• خط ۲: تابع [install] در اینجا دو پارامتر می‌گیرد:
  • [Vue]: تابع حاصل از دستور [import Vue from ‘Vue’]. می‌توان این را به‌عنوان یک کلاس در نظر گرفت؛
  • [eventBus]: ابجکتی که توسط اسکریپت [./event-bus] صادر می‌شود؛
• خطوط ۴–۷: تعریف (که به آن پروتوتایپ گفته می‌شود) تابع [Vue] را با افزودن ویژگی [$eventBus] به آن تغییر دهید. اگر عبارت [classe] را در نظر بگیریم، ویژگی [$eventBus] به کلاس [Vue] اضافه می‌شود. بنابراین، کامپوننت‌هایی که نمونه‌هایی از [Vue] هستند، به این ویژگی جدید دسترسی خواهند داشت؛
• خط ۶ نشان می‌دهد که وقتی به ویژگی [Vue].$eventBus مراجعه می‌شود، پارامتر [eventBus] از خط ۲ بازگردانده خواهد شد. کمی بعد خواهیم دید که این پارامتر دوم، شی [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);

//بوت‌استرپ
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('#app')

توضیحات

• خطوط ۱۴–۱۶ افزونه [PluginEventBus] را فعال می‌کنند. پس از خط 16، تمام نمونه‌های کلاس (فنksiyon) [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>

توضیحات

• خط ۳۳، استفاده از خاصیت [this.$eventBus] کامپوننت. همچنین باید توجه داشت که اسکریپت در خط ۱۱ دیگر اسکریپت [./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>

توضیحات

• خط ۱۳، استفاده از خاصیت [this.$eventBus] کامپوننت. همچنین باید توجه داشت که اسکریپت در خط ۷ دیگر اسکریپت [./event-bus.js] را وارد نمی‌کند؛

11.6. کامپوننت [Component3]

کامپوننت [Component3] کد یکسانی با [Component1] دارد. همچنین به رویداد [someEvent] گوش می‌دهد.

11.7. اجرای پروژه

نتایج همانند پروژه قبلی است.