Vue: Catatan Belajar Vuex Namespaced

Pada tulisan sebelumnya yang tentang modular ada satu yang kurang sreg bagi saya, mengenai penamaan getters, mutations, dan actions yagn tidak boleh sama.

Bagi saya ( dan bisa beda bagi yang lain ) misal jika saya sudah memisahkan satu alur katakanlah crud ke dalam satu berkas/module lalu module itu saya beri nama product.js maka mayoritas fungsi mengacu ke nama berkas atau module, misal karena sudah di dalam module product mendingan saya bikin fungsi setTitle() dari pada setTitleProduct(), setidaknya mengurangi jumlah karakter yang diketik.

Agar si modular yang sebelumnya bisa seperti itu, vuex menyediakan fitur lainnya, namanya namespaced.

Konfigurasi

Untuk konfigurasinya sangat mudah, cukup tambahkan properti namespaced dan beri nilai true.

export default {
  namespaced: true,
...state, getters, mutations, actions
}

Sudah

Oh iya saya tidak mengubah apapun selain menambahkan “namespaced:true” di dalam product.js

State

Untuk state sama dengan tulisan sebelumnya tidak ada perubahan apapun.

..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

Agak sedikit berbeda ketika module kita dibuat namespace

...script
computed: {
    usingDirectGetters() {
      return this.$store.getters['product/getTitle'];
    },
  },

...template
{{ usingDirectGetters }}

// output
Selamat datang di: product title

Sedikit berbeda kan? memanggil getters dengan kurung sikut dengan format ‘namaModule/namaGetters’.

Kalau menggunakan mapGetters, kita bisa kasih argumen pertama sebagai moduleName dan argumen berikutnya objek atau array berisi getters.

...script
computed: {    
    ...mapGetters('product', {
      productTitle: 'getTitle',
    }),
  },

...template
{{ productTitle }}

// output
Selamat datang di: product title

Mutations

Jika langsung tanpa mapMutations

...script
  methods: {
    changeTitle() {
      this.$store.commit('product/setTitle', 'change title product');
    },
  },

Jika menggunakan mapMutations

methods: {
    ...mapMutations('product', {
      updateTitle: 'setTitle',
    }),
    changeTitle() {
      this.updateTitle('change title product');
    },
  },

Actions

Tanpa mapActions

methods: {
    changeActionTitle() {
      this.$store.dispatch('product/changeTitle', 'Change Action Titile');
    },
  },

Dengan mapActions

methods: {
    ...mapActions('product', {
      changeTitleAction: 'changeTitle',
    }),
    changeTitle() {
      this.changeTitleAction('Change Action Titile');
    },
  },

Contoh dalam”crud” bisa dilihat di sini https://gitlab.com/ariesmaulana/learn-vuex-part2/tree/part4-namespaced

Topics