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