بنية Flux بسيطة باستخدام Vue.js

في التطبيقات الصغيرة التي لا تحتاج إلا إلى نمط بسيط لإدارة الحالة، أستخدم دائمًا مكوّنًا واحدًا يحتفظ بحالة التطبيق، وهو الـ container. ويكون هذا المكوّن المصدر الوحيد الموثوق للحالة (single source of truth)، يرجع إليه التطبيق لمعرفة حالاته. توفّر Vue آلية لإنشاء مستمع أحداث عام على مستوى الجذر يُسمّى EventBus، وهي طريقة بسيطة جدًا لمحاكاة بنية flux.

كل ما تحتاجون إليه هو وحدة واحدة تصدّر Vue باسم EventBus على النحو التالي

// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

بعد ذلك يمكنكم استخدامها داخل الـ container للاستماع (listen) إلى الأحداث القادمة من أي مكوّن داخل التطبيق. عادةً أضيف المستمع في مرحلة created من دورة الحياة.

EventBus.$on('event-name', callback)

ثم يمكنكم استيراد EventBus في أي مكوّن من مكوّناتكم وإطلاق الحدث my-custom-event من أي مكان، دون الحاجة إلى إرسال الحدث (emit) إلى المكوّن الأب وتكرار العملية كلها في كل مكوّن يقع بين المكوّن الذي يطلق التغيير والـ container المستهدف.

// Goes directly to the global listener and triggers callback
EventBus.$emit('event-name')

هذا كل شيء. وإذا أصبح الأمر معقدًا أكثر من اللازم، ففكّروا في استخدام Vuex.