Monday, February 12, 2018

Belajar Dasar Mutations di Vuex

Dipostingan sebelumnya kita udah liad gimana cara make getters. Nah disini akan dilanjutkan ke mutations... :)
Pertama-tama kita set dl strict:true di store biar state storenya g' bisa diubah diluar store. Jadi statenya hanya bisa diubah lewat mutations atau lewat actions yeeah...
eeemm... trs kita ganti layout templatenya ajjah biar action itu klihatan bingit contohnya...hehe.. so layout yg baru kyk gini :

Naah... disitu kita ada input text yg punya ref="power_value". Nanti nilai inputnya dipake sama method changePower_main pake refs.value. Jadi tampilannya skrg kek gini :
Siiipss... skrg kita tambain methods changePower_main kek gini :
Nah... var temp itu nantinya nyimpen isi dari <input> tag html kita. Terus  di berikutnya yang this.$store.commit, naah itu caranya manggil mutations di vuex. Jadi changeMainPower itu nama mutations-nya, terus temp itu variabel input buat changeMainPower. changeMainPower sendiri dibuat di file store kita kyk gini :
So kliatan changeMainPower itu manggil state dari store kita, trus variabel angka itu inputan dari yg diisi sama temp di this.$store.commit('changeMainPower', temp); siiipsss... sy pikir kek gitu ajjah... Naah... misalkan kita masukin nilai 6 di inputnya kyk gini :
Setelah itu kita pencet change power hasilnya kyk gini :

Naah.... powernya berkurang 6...trs vue devtollsnya ngedetek mutations yg dipanggil..trs kliatan jg perubahan data2nya... yeaaah... awesome... ckup sekian dl untuk yg mutations... semoga bermanfaat... :)

Perubahan kode program yg lengkap bisa dilihat di github Hisoka disini...
Terus informasi official buat mutations bisa dilihat disitus vuexnya disini....

No comments:

Post a Comment