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

Belajar Dasar Event di Vuejs

Jadi disini kita punya kerangka vuejs kek gini :

Tampilannya :

Selengkapnya bisa dilihat di github disini
Naah... jadi dalam kode diatas kita punya 2 biji button trs 1 biji div buat nampilin angka. Dari title buttonya udh klihatan klu button yg add itu nantnya buat nambah/naikin angka, trs subtract buat ngurangin angkanya daan buat ngelakui itu semua kita butuh ngedetect event pas ngeklik button di vuejs. Carana kek gini ajjah :

Jadi klu pengen ngedetek event di vuejs kita cuma make 'v-on:event_yg_mau_didetect'. Karena kita pengen yg click button berarti 'v-on:click'. Trs v-on:click = add itu maksdnya pas diklik kita manggi fungsi 'add' seperti yg terlihat pada property methods, disitu ada fungsi add() {this.myInt++;} yg intinya naikin 1 biji angka buat myInt. Selse daaah... :D
v-on itu sebenarnya bisa diganti pake @ ajjah biar lbih simpel. So untuk yg substract kita pake @ ajjah daah... :D kek gini...

Hasilnya :

Trs event lain yg bisa dicoba yg double click. Kodenya kek gini :

Siipss... sy pikir sama ajjah kekna sm yg sebelumnya... :D
Naah... event berikutnya yg pengen dicoba adalah hover mouse. Pertama-tama kita bikin div kosong dl sama style cssnya kek gini :

Hasilnya :

Di dalam div ini kita akan ngedetek posisi mouse hover terus nampilin koordinatnya ketengah2...

Hasilnya :

Siiipss.. cukup demikian contoh2 event di vuejs. Untuk event event yg lain silahkan liad official dokumentasinya disini....