Arsitektur Flux Sederhana dengan Vue.js

Untuk aplikasi kecil yang hanya memerlukan pola state management sederhana, saya selalu menggunakan satu komponen untuk menyimpan state aplikasi, yaitu sebuah container. Container ini berfungsi sebagai single source of truth yang menjadi acuan aplikasi untuk state-nya. Vue menyediakan mekanisme untuk membuat global event listener di level root yang disebut EventBus, yang merupakan cara super sederhana untuk meniru arsitektur flux.

Yang Anda perlukan hanyalah satu modul yang mengekspor Vue sebagai EventBus seperti ini

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

Kemudian Anda dapat menggunakannya di dalam container untuk listen event dari komponen mana pun di dalam aplikasi. Saya biasanya menambahkan listener pada lifecycle created.

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

Setelah itu Anda dapat mengimpor EventBus ke komponen mana pun dan memicu my-custom-event dari mana saja, tanpa harus melakukan emit event ke parent komponen tersebut dan mengulangi seluruh proses di setiap komponen yang berada di antara komponen pemicu perubahan dan container tujuan.

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

Selesai. Jika semuanya mulai terlalu kompleks, pertimbangkan untuk menggunakan Vuex.