Bagaimana cara mudah memahami pola Vuex untuk State Management pada Vuejs?

Vuex store

Akhirnya hari ini menyempatkan diri kembali untuk berbagi. Gimana kabarnya kawan-kawan? semoga selalu dalam keadaan sehat jasmani dan rohani.

Pada tulisan kali ini saya ingin berbagi bagaimana cara mudah untuk memahami pola dari State Management khususnya adalah Vuex. Seperti yang di jelaskan pada laman resminya terkait 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.

Dari pengertian diatas kita ketahui bahwa Vuex sebagai manajemen state yang terpusat untuk semua komponen dalam aplikasi dengan ketentuan state hanya dapat dimutasi atau diubah dengan cara tertentu. Bagaimana aturan yang berlaku pada Vuex untuk memanajemen state? terdapat 4 bagian pokok dari Vuex yaitu Actions, Mutations, State dan Getters.

Sebelum kita lanjut, mari kita lihat kenapa kita butuh manajemen state? Pada gambar dibawah ini adalah contoh komponen-komponen pada sebuah aplikasi vuejs.

contoh pohon graf.

Jika kita memiliki komponen-komponen seperti pada gambar diatas. Komunikasi yang dilakukan untuk saling bertukar data pada state di setiap komponen biasanya menggunakan props dari sebuah parent ke child komponen. Misalnya dari komponen team kita punya state yang nantinya bisa diubah datanya oleh komponen team-detail. Proses ini bisa dilakukan jika kita mengirimkan sebuah props dari komponen team ke komponen team-detail yang berupa fungsi atau method yang bisa digunakan untuk mengubah data state pada komponen induk yaitu komponen team. Proses ini akan cukup panjang dan membingungkan apabila dilakukan oleh komponen team-detail jika ingin mengubah data pada komponen stage-detail. Karena harus mengirimkan method atau fungsi pada props yang menghubungkan setiap komponen induknya sampai ke komponen yang ingin dituju.

Store pada vuex.

Pemusatan state ini disebut dengan Store pada Vuex. Jadi semua actions, mutations, state dan getters ada didalam sebuah Store. Sebelumnya telah kita telah menyinggung 4 pokok tersebut, berikut ini cara mudah untuk memahaminya. Sebagai contoh kita punya sebuah Store seperti dibawah ini.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  },
  getters: {
    getCount(state) {
     return state.count
    }
  }
})

State

State pada vuex kita ibaratkan seperti kumpulan data-data dalam sebuah wadah (Store) yang sifatnya terpusat. Jadi sebuah state di vuex bisa dikonsumsi oleh seluruh komponen-komponen yang ada pada aplikasi vuejs kita. Karena sifatnya terpusat, state ini akan memudahkan kita untuk mendapatkan data-data yang dibutuhkan, walaupun posisi dari komponen-komponen pada aplikasi kita (dalam bentuk pohon graf ) berjauhan. Jadi sebuah state bisa dikonsumsi oleh semua komponen karena sifatnya yang terpusat.

Mutations

Mutations adalah kumpulan fungsi-fungsi atau perintah-perintah yang bisa digunakan untuk melakukan mutasi atau perubahan pada state yang ada di dalam Store. Jadi jika kita ingin memanipulasi atau mengubah nilai dari sebuah state yang ada di dalam store kita dapat memanggil mutations dengan menggunakan perintahcommit. Pada perintah ini kita akan memanggil mutations berdasarkan type. Misal kita punya sebuah mutations seperti dibawah ini.

mutations: {
  increment (state) {
    // meningkatkan nilai state
    state.count++
  }
}

Maka untuk memanggil sebuah mutations incretment, perintah yang bisa kita gunakan adalah commit('increment'). Contoh penggunaannya ada pada Actions dibawah ini.

Actions

Actions adalah kumpulan dari fungsi-fungsi atau perintah-perintah yang bisa dipanggil seperti halnya mutations, tetapi memiliki perbedaan yaitu pada actions bisa melakukan beberapa perintah secara asynchronous dan bisa digunakan untuk melakukan commit pada mutations apabila ingin mengubah data pada state. Kemudian jika kita ingin memanggil actions maka yang kita gunakan adalah perintah dispatch. Misal kita punya contoh actions seperti dibawah ini.

actions: {
   increment (context) {
    // melakukan commit pada mutations
    context.commit('increment')
  }
}

Kita dapat memanggil actions tersebut pada komponen dengan cara berikut.

store.dispatch('increment')

Getters

Getters yaitu kumpulan perintah-perintah atau fungsi-fungsi yang bisa digunakan untuk mendapatkan nilai dari state. Jadi, jika kita ingin mendapatkan nilai count yang ada pada state maka kita dapat memanggil getters dengan cara store.getters.getCount di komponen yang ingin mendapatkan nilai dari count tersebut.

Kesimpulan

Kemudahan yang diberikan oleh Vuex untuk bertukar data melalui Store pada komponen-komponen di aplikasi vuejs sangat baik. Sehingga memudahkan kita untuk melakukan manipulasi data dan menampilkan data dengan mudah antar komponen yang posisinya pada pohon graf cukup berjauhan. Proses ini juga memudahkan kita apabila aplikasi yang dibagung cukup besar dan menyulitkan untuk proses pertukaran data pada setiap komponennya.

Terimakasih buat kawan-kawan yang sudah membaca. Semoga bermanfaat dan jika ada kritik serta saran yang membangun saya sangat berterimakasih.
:D