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

Vuejs devtools

Link 
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

Getter di Vuex

Dipostingan sebelumnya kita udah ngebuat store yg kita akses lngsung datanya lewat state. Naah..sebenarnya ada cara lain yaitu pake getters, contohnya kek gini :

Naah... di bagian getters kita bikin 2 biji getters masing-masing buat main dan biju teams, cmn yg biju team blom dilengkapin. Trs yg getter buat main_teams tuh ngambil state (state =>) trs dari state access ke main_teams (state.main_teams), nah karena main_teams berupa array berarti kita bisa ngeloop ke element2nya lewat map (main_teams.map). Dari map ini kita kembaliin lagi nilai arraynya tapi dengan sedikit modifikasi kyk object di return itu (line 25 smpe 27).
Siipss... klu kita pengen akses gettersnya di vue component, caranya mirip2 ajjah sama akses state kek gini

Siipss... hasilnya

Siiipss... cara yg sama bisa kita aplikasiin ke bijuu_teamss yeeaah... :D
Kode selengkapnya bisa dilihat disini.....


Postingan berikutnya tentang mutations, bisa dilihat disini...

Membuat List Member Menggunakan Vuex

Disini kita akan membuat list member menggunakan vuex. So silahkan ikuti postingan ini untuk settingan awalnya...
Pertama-tama kita udah punya webpack-simple yg hanya menggunakan vuejs yang tampilan webnya kek gini..

Naah... Karena kita g' butuh tampilan layout diatas, jadi pertama-tama kita delete dl element2 yg digunain di App.vue seperti terlihat pada gambar di bawah... (lbih jelasnya silahkan liad commitnya di sini...)

Klu udah diremove... berarti tampilan layout utama kita sekarang jadi kosong... :D
Siiipss... berikutnya kita buat 2 biji file .vue yg baru.... Kita buat directory baru ajjah namanya 'components' terus didalem folder components ini kita bikin 2 biji file.vue kek gini :

Siipss...berikutnya kita isiin kode berikut untuk kedua file vuenya...

Lebih jelasnya bisa dilihat diisini...
Siiipss... berikutnya kita masukin kedua file vue tadi ke app.vue. Carana kek gini ajjah...

Lebih lengkapnya bisa dlihat disini....
So jadi dalam kode diatas kita import main_team_member.vue dan bijuu_team.vue trs dimasukin ke variabel components. Naah.. didalam variabel component ini MainTeam diassign ke main-team & bijuu-team. Akhirnya main-team & biju-team dapat dikenali oleh template sehingga dipanggil kyk <main-team> & <bijuu-team>. Trs klu liad isi dari main-team sama bijuu-team itu cuma <h1> ajjah kegini :

Makanya tampilan web kita sekarang menjadi seperti ini ...

Naaah... berikutnya baru kita tambain store yg diambil dari vuex. Store ini nantinya nyimpen beberapa item kyk state, getters, actions, mutations dan modules....
So... mari kita install vuexnya dl
npm install vuex --save

Trs kita bikin folder baru namanya 'store' trs didalem folder ini kita bikin file javascript namanya 'store.js', trs taroin kek gini :

Naaah... itu kerangka utama store di vuex. Trs di line ke-4, itu maksudnya biar vuex dipake didalem vue. Klu misalkan kita pengen pake plugin yg lain kyk firebase, nah berarti tar firebasenya jg diadd diistu kyk Vue.use(firebase) naah... gitu gitu laah... :D
Terus biar storenya bisa diakses sama komponent2 kita, kita harus nambain store ini ke main.js kek gini :

Siiipss... klu udah ditambain kyk diatas, komponen apapun yg kehubung ke App.vue bakalan bisa akses store yg baru kita bikin....Siipss... berikutnya kita tambain data dummy dl ke state distore kita kek gini :

trs didalem komponen main_team_member.vue kita akses dan tampilin isi statenya kek gini :

Perubahan kode selengkapnya bisa dilihat disiniiii....
Hasilnya...

Siiipss... Trs statenya berikutnya yg tambain adalah yg buat bijuu_team kek gini daah...

Selengkapnya bisa dilihat disini...
Hasilnya...

Siiipss... sampai disini kita baru make STATE di storenya vuex.... daaan... ckup sampai disini dlu ehehe... :D

Postingan berikutnya ttg getters bisa dilihat disini...