Vue : Vuex mapGetters

Jadi kemarin ada yang komen menanyakan kenapa di tulisan saya tentang vuex tidak ada fungsi mapGetters sedangkan saat dia baca tulisan orang lain ada, jawaban saya sih karena waktu saya belajar vuex saya baca gak wajib juga, tapi emang mapGetters cukup membantu. Nah, tulisan kali ini coba menjawab pertanyaan dari komentar tersebut.

Kalau dibaca dari ofisial vuex mapGetters itu disebutkan sebagai :

The mapGetters helper simply maps store getters to local computed properties

Langsung contoh ajalah yah. Sebelumnya saya berasumsi sudah terpasang vue dan vuex nya.

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        student: 'John Doe',
        another: 'Another Student'
    },
    getters: {
        getStudent(state) {
            return state.student;
        },
        getAnother(state) {
            return state.another
        }
    }
})

Component.vue

  

    {{ student }}
  

Maka di browser akan menghasilkan John Doe.

Itu yang saya lakukan kemarin langsung akses ke getters. Kalau menggunakan mapGetters pada component.vue saya ubah seperti berikut.

  

    {{ student }}

    {{ getAnother }}
  

Di browser akan menampilkan :
John Doe
Another Student

Sebenarnya manggil langsung ke getters atau menggunakan mapGetters bagi saya sama aja, tergantung kebutuhan. Mungkin dengan mapGetters skrip jadi lebih pendek.

Btw, terima kasih atas pertanyaanya.

Referensi :
https://vuex.vuejs.org/en/getters.html