สถาปัตยกรรม Flux แบบง่ายด้วย Vue.js

สำหรับแอปเล็ก ๆ ที่ต้องการแค่ pattern จัดการ state แบบง่าย ๆ ผู้เขียนมักใช้ component เดียวเก็บ state ของแอปไว้ เรียกว่า container ซึ่งทำหน้าที่เป็น single source of truth ให้แอปใช้อ้างอิง state ของตัวเอง Vue มีกลไกสำหรับสร้าง global event listener ที่ระดับ root เรียกว่า EventBus ซึ่งเป็นวิธีสุดง่ายในการเลียนแบบสถาปัตยกรรม flux

ทั้งหมดที่คุณต้องมีคือ module เดียวที่ export Vue เป็น EventBus แบบนี้

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

จากนั้นคุณสามารถใช้มันภายใน container ของคุณเพื่อ listen event จาก component ไหนก็ได้ในแอป โดยปกติผู้เขียนจะเพิ่ม listener ไว้ใน life cycle created

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

จากนั้นคุณสามารถ import EventBus เข้าไปใน component ไหนก็ได้ของคุณ แล้ว trigger my-custom-event จากที่ไหนก็ได้ โดยไม่ต้อง emit event ขึ้นไปหา parent ของ component นั้น แล้วทำซ้ำกระบวนการเดิมในทุก component ที่อยู่ระหว่าง component ที่ trigger การเปลี่ยนแปลงกับ container ปลายทาง

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

แค่นั้นเลย ถ้ามันเริ่มซับซ้อนเกินไป ลองพิจารณาใช้ Vuex