Vue: Catatan Belajar Modular Vuex

Salah satu fitur vuex yang membantu jika ukuran store sudah membengkak yaitu dengan sistem modular, sederhananya membuat module untuk spesifik state management.

Konfigurasi

Buat satu berkas sejajar dengan vuex ( store/index.js ), misal saya membuat module “product” yang bertanggung jawab dalam urusan CRUD produk (misalnya ),  saya buat dengan nama berkasnya product.js

Isi dari modul sebenarnya sama strukturnya dengan vuex yaitu memiliki state, getters, mutations, dan actions.

// store/product.js
export default {
  state: {
   title: 'product title',
   product: [],
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },

};

di dalam global vuex ( saat saya menyebut global atau global vuex berarti itu mengacu ke dalam berkas store/index.js ).

import product from './product';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    product,
  },
  state: {
    title: 'Global Title',
    ...lainnya
  },
 ...getters, mutation, dan actions ...
});

Sudah, konfigurasi modular selesai.

Memanggil Module State

Keduanya memiliki state ‘title’ baik di global maupun di product, untuk memanggil langsung state module harus diawali dengan nama modulenya.

..script
computed: {
    moduleTitle() {
      return this.$store.state.product.title;
    },
    globalTitle() {
      return this.$store.state.title;
    },
  },

...template
{{ moduleTitle }}
<hr>
{{ globalTitle }}

// hasil
product title
-------
Global title

Getters

Berbeda dengan state yang sudah terkelompokan di dalam module, getters ( dan juga mutations serta actions ) walaupun ditulis di dalam module, tetap dianggap dalam bagian global. Sehingga cara penggunaanya pun sama.

Misal tambahkan getters di modul “product” dengan nama getTitle()

...product.js
getters: {
    getTitle(state) {
      return `Selamat datang di: ${state.title}`;
    },
},

Lalu untuk menggunkannya

... script
import { mapGetters } from 'vuex';
.
.
.
  computed: {
    ...mapGetters([
      'getTitle',
    ]),
  },

...template
{{ getTitle }}

//output
Selamat datang di: product title

Tapi, gara-gara getters tetap dianggap bagian elite global maka nama getters tidak boleh sama, jika ada nama getters yang sama akan ada peringatan atau pesan error

[vuex] duplicate getter key: getterTitle

Mutations

Memanggil mutations di dalam module tidak ada bedanya dengan memanggil mutations pada global.

... product.js
  mutations: {
    setTitle(state, payload) {
      state.title = title;
    },
},

...script
import { mapMutations } from 'vuex';
.
.
.
  methods: {
    ...mapMutations([
      'setTitle',
    ]),
    changeTitle() {
      this.setTitle('change title product');
    },
  },

Sekali lagi, karena masih dianggap global jangan gunakan nama mutation yang sama, kalau ada, kedua mutation baik yang ditulis di global dan module akan dieksekusi. Tentu tidak mau niat mau ngubah apa yang keubah apa dan apa lagi.

Actions

Action pun sama, tidak ada bedanya dengan mutaions, yang pasti jangan punya nama yang sama!

...product.js
actions: {
    changeTitle({ commit }, payload) {
      commit('setTitle', payload);
    },
}

...script

import { mapGetters, mapMutations, mapActions } from 'vuex';
.
.
.
methods: {
    ...mapActions([
      'changeTitle',
    ]),
    changeActionTitle() {
      this.changeTitle('change title actions product');
    },
  },

Saya ada contoh penggunaan module membuat seolah-olah crud, bisa dilihat di sini: https://gitlab.com/ariesmaulana/learn-vuex-part2/tree/part3-module