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

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

كل ما تحتاجون إليه هو module واحد يصدّر نسخة من Vue باسم EventBus، هكذا:

import Vue from 'vue'
export const EventBus = new Vue()
lang-javascript

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

/*
In this scenario you could just use `vm.$emit` to communicate to `Container` from `CustomButton.
In reality, this pattern will shine when your component is nested inside some more components and
you can't really emit event to the `Container` quite easily.
*/
<template>
<custom-button label='Click me and the I will update the container state' />
</template>

<script>
import { EventBus } from "./EventBus.js"
import CustomButton from "./CustomButton.vue"
export default {
 data () {
  return { buttonClickCount: 0 }
 },
 created () {
  EventBus.$on('my-custom-event', (params) => {
   // you can submit data via params when emitting event.
   console.log(params) 
   this.buttonClickCount++ 
   }
 },
 components: {
  'custom-button': CustomButton
 }
}
</script>
lang-vue

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

إليكم الشكل الذي قد يبدو عليه CustomButton:

<template>
<button @click='increaseUpdateCount'>{{label}}</button>
</template>
<script>
import { EventBus } from './EventBus.js'
export default {
 props: ['label'],
 methods: {
   increaseUpdateCount () {
    EventBus.$emit('my-custom-event', 'hello')
   }
  }
}
</script>
lang-vue

هذا كل شيء. ومع نمو تطبيقكم، قد يكون من الأفضل التفكير في استخدام Vuex، خاصة إذا كانت عدة containers تتشارك بعض الحالات.

مع أطيب التحيات!