Memahami Konsep State Management pada Vue.js
Saat membangun SPA yang berskala besar, setidaknya kita pernah menyadari bahwa beberapa komponen yang kita bangun bergantung pada state yang sama.
Secara ringkas, kita dapat menerapkan konsep “one-way data flow” untuk membangun aplikasi yang cukup simple pada Vue js. Kira-kira seperti ini :
new Vue({
//state
data(){
return {
number: 0
}
},//view
template:
`<div>{{ number }}</div>`
,//actions
methods: {
count(){
this.number++;
}
}
})
Cuplikan di atas terdapat 3 point inti pattern one-way data flow :
state: source of truth, sumber utama aplikasi yang dapat berupa data atau props.view: hasil mapping state yang dideklarasi menjadi tampilan.actions: tindakan terhadap state, dapat berupa function yang bereaksi saat ada input dari user.
Mudah saja untuk membangun aplikasi yang ringkas dan hanya memerlukan “one-way data flow” sebagai alur state-nya. Tapi, kita akan menemukan masalah ketika kita menerapkan konsep ini saat membangun aplikasi yang lebih kompleks. Ada kondisi ketika :
- Suatu komponen bergantung pada satu state tertentu.
- Suatu state dapat digunakan untuk beberapa komponen.
Kondisi ini setidaknya membuat kita berpikir bagaimana caranya agar kita tetap menerapkan prinsip DRY. State management setidaknya dapat menyelesaikan masalah ini.
Seperti Flux pada React, Vue.js memiliki state management yaitu Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
const store = new Vuex.Store({
state: {
number: 0
}, mutations: {
count(state) {
state.number++
}
}, actions: {
count(newNumber){
newNumber.commit('count')
}
}
})
Store pada Vuex merupakan container yang mengisolasi suatu state management. Bisa dikatakan store merupakan inti dari Vuex. Store terdiri dari lifecycle state management seperti state, mutations, dan actions. Vuex memberlakukan aturan yang akan menjalankan pola state management sebagai global singleton.
- State tidak boleh diubah secara langsung.
- Untuk bereaksi dengan input user, kita harus meng-commit mutations untuk mengubah state.
- State dipanggil secara eksplisit bersama dengan parent-nya, contohnya
state.number - Actions dapat menjadi opsi untuk menjalankan mutations agar code lebih eksplisit.
Untuk memanggil actions pada komponen dapat dilakukan dengan cara men-trigger store.dispatch().
Selain state, mutation, dan actions, Vuex juga memiliki core concepts seperti getters untuk melakukan komputasi terhadap state.
Store juga dapat dimodulasikan melaluimodules. Masing-masing modules yang dibuat terdiri dari state, mutation, dan actions nya sendiri. Kemudian setiap modules disatukan pada single tree store.
Adapun hasil dari PoC Vuex ini dapat dilihat disini.
Kesimpulan
- Dalam membangun aplikasi skala besar dibutuhkan pola state management untuk menjaga prinsip DRY.
- Vuex merupakan library state management Vue.js yang diinisiasi pada store dan memiliki aturan untuk memutasi state.
