Vuex: Matikan opsi namespaced sekarang!
Lihat bagaimana mematikan opsi namespaced: true dapat membantu penggunaan Vuex.
Tentang Vuex Constants
Vuex merekomendasikan penggunaan constants dalam mengakses perintah commit atau mutation. Hal yang sama dapat pula dilakukan untuk perintah getters dan dispatch(action). Penggunaan constant dapat meminimasi error akibat kesalahan ketik atau grammatical error.
Catatan: Constants yang telah didefinisikan berlaku sebagai single source of truth atas setiap jenis getter, mutation, dan action yang dapat dilakukan. Hal ini mengharuskan adanya upaya untuk menghapus setiap constant yang sudah tidak digunakan dalam konfigurasi Vuex.
Terkait Penamaan dan Nilai Constant
// 😱
let IS_GUEST = 'isGuest'
let LOGIN = 'doLogin'
let SET_LOGIN_STATUS = 'set_login_status'// 😃
IS_GUEST = 'IS_GUEST'
LOGIN = 'LOGIN'
SET_LOGIN_STATUS = 'SET_LOGIN_STATUS'
Nilai dari constant sebaiknya identik dengan namanya. Tidak kurang dan tidak lebih. Hal ini dimaksudkan untuk memudahkan proses debugging melalui Vue-Devtools, dimana log yang tercatat bukan nama, melainkan nilai dari constant yang terkait.
Mematikan opsi namespaced=true akan memudahkan penggunaan constant sebagai getter/mutation/action types.
Sebutlah konfigurasi Vuex yang telah didefinisikan sebelumnya dienkapsulasi ke dalam Vuex Module yang bernama AUTH, dimana opsi namespaced bernilai true.
Secara default, nilai dari opsi namespaced adalah false. Pengaturan opsi namespaced: true mengakibatkan setiap getter, mutation, dan action teregistrasi di bawah namespace AUTH/, dimana ini mengakibatkan cara sebelumnya dalam memanggil perintah getters, commit, dan dispatch menjadi tidak valid.
Masalah tersebut diatasi dengan salah satu dari dua cara berikut.
- Menambah namespace prefix pada setiap pemanggilan perintah:
2. Menggunakan mapGetters, mapMutations, mapActions, atau createNamespacedHelpers
Solusi (2) tampak teramat verbose untuk sekedar mengakses method pada Vuex. Baik solusi (1) dan (2) mengharuskan developer untuk tahu namespace dimana getter, mutation, dan action teregistrasi. This would render our previously defined constants pretty much useless.
Dengan mematikan opsi tersebut, maka penggunaan constant dapat dilakukan tanpa diperlukannya langkah-langkah ekstra.
Catatan: Meski nilai opsi namepaced: false, parameter state yang diekspos sebagai argumen dalam getter, mutation, atau action akan tetap mengacu kepada local state di dalam modul terkait. Desain yang seperti ini mempermudah proses restrukturisasi modul Vuex, dimana perubahan struktur tidak mengharuskan adanya perubahan cara akses terhadap state di masing-masing modul.
Bagaimana jika saya menambahkan prefix <nama_module> ke setiap definisi constant?
Mmmmmm, tidak bisa.
Mematikan opsi namespaced: true akan memaksa kita untuk lebih spesifik dalam menentukan nama constant.
Memanggil perintah store.dispatch('GET_DATA', /* payload */) akan men-dispatch dua action sekaligus, yaitu GET_DATA pada modul profile dan modul tasks. Jika itu tidak diinginkan, we have to be clear and specific on what is about to be called.
Maka, kita perlu memodifikasi definisi diatas, misalnya menjadi:
Keharusan me-manage variable naming tersebut dapat dipandang sebagai pros atau cons, tergantung bagaimana memandangnya.
Catatan: Duplikasi nama mutation dan action tidak dianggap sebagai sebuah error oleh Vuex. Adapun, duplikasi nama getter akan men-throw error berupa [vuex]: duplicate getter key: <nama_getter> saat Vuex.Store diinisiasi dalam aplikasi.
Kesimpulan
Penggunaan constant dapat mempermudah developer dalam mengakses perintah getter, commit, dan dispatch pada Vuex. Adapun, guna menjamin hal demikian, opsi namespaced sebaiknya diatur bernilai false. Metode seperti ini akan memaksa kita untuk lebih spesifik dalam menamai getter, mutation, atau action types yang ada.
