Vue: Catatan Belajar mapHelper Vuex

Di tulisan sebelumnya saya menulis bagaimana menggunakan getters, mutation, dan actions. Di tulisan ini juga masih membahas yang sama, bedanya saat memanggil ketiga hal tadi kita akan gunakan “helper” yaitu: mapGetters, mapMutations, mapActions.

mapGetters

Sesuai namanya helper ini berfungi sebagai helper untuk getters, sederhananya mapGetters ini mapping ( istilah yang enak apa ya? ) getters ke dalam computed properti di component. Menggunakan contoh pada tulisan sebelumnya:

...script
computed: {
   greetName() {
    return this.$store.getters.getName;
  }
}
...template
{{ greetName }}

//outputnya
Selamat Datang: John Doe

Sebelum menggunakan mapGetters kita harus panggil dulu fungsi mapGetters dari vuex

import { mapGetters } from 'vuex';

export default {
...
}

Lalu computed properti yang tadi kita ubah sebagai berikut

...script
computed: {
    ...mapGetters([
       'getName',
    ]),
  },

...template
{{ getName }}

//outputnya
Selamat Datang: John Doe

Di atas mapGetters dimasukan kedalam computed dengan spread syntax yang ditandai tiga buah titik (  silahkan baca mengenai spread syntax di artikel-artikel atau dokumentasi es6 ). Isi mapGetters sendiri merupakan array yang isinya merupakan nama dari getters di vuex.

Kita bisa juga buat alias agar namanya tidak perlu sama dengan nama getters, caranya ubah array tadi menjadi objek.

...script
ccomputed: {
    ...mapGetters({
      greetName: 'getName',
    }),
  },

...template
{{ greetName }}

//outputnya
Selamat Datang: John Doe

mapMutations

Sesuai namanya ini merupakan helper mapping untuk mutations, jika tadi di dalam computed ini dipanggil di dalam methods. Sebelumnya kita perlu panggil juga helper mapMutations

import { mapGetters, mapMutations } from 'vuex';

Cara menggunakan mapMutations pun tidak berbeda jauh dengan mapGetters.

..script
methods: {
  ...mapMutations([
        'setName',
      ]),
  changeName() {
       // sebelumnya seperti ini
      // this.$store.commit('setName', payload);
      // saat sudah di-map oleh mapMutations
       this.setName(payload);
    },
}

Sama seperti mapGetters lagi kita juga bisa ganti alias mapMutations yang jika array maka namanya sama dengan nama di vuex ingin diubah dengan nama lainnya, kembali lagi gunakan objek jangan array.

..script
methods: {
  ...mapMutations({
      updateName: 'setName',
    }),
  changeName() {
       // sebelumnya seperti ini
      // this.$store.commit('setName', payload);
      // saat sudah di-map oleh mapMutations
       this.updateName(payload);
    },
}

mapActions

Untuk actions sangat mirip dengan mapMutations sebenarnya

..script
methods: {
  ...mapActions([
    'fetchUserList'
   ]),
  fetchUsers() {
       // sebelumnya seperti ini
      // this.$store.dispatch('fetchUserList', payload);
      // saat sudah di-map oleh mapMutations
       this.fetchUserList();
    },
}

Sekali lagi kita bisa bikin alias untuk nama actions

..script
methods: {
    ...mapActions({
      loadUser: 'fetchUserList',
    }),
  fetchUsers() {
       // sebelumnya seperti ini
      // this.$store.dispatch('fetchUserList', payload);
      // saat sudah di-map oleh mapMutations
       this.loadUser();
    },
}

Dan jangan lupa sebelumnya panggil dulu fungsi mapActions

import { mapGetters, mapMutations, mapActions } from 'vuex';

Untuk penggunaan ini saya kembalikan kepada masing-masing, enak di-map seperti ini atau panggil langsung.