Penggunaan State Management Pada Vue Js Dengan Vuex
Selamat Pagi, kali ini saya mendapatkan kesempatan lagi untuk menulis artikel, pada kali ini saya akan membahas tentang basic vue js khususnya pada state management pada vue js menggunakan vuex dengan studi kasus sederhana yaitu membuat counter.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
Jadi vuex adalah sebuah state management pattern pada vuejs yang mana pekerjaannya sebagai centralized penyimpanan untuk seluruh component dalam program vuejs yang akan kita bangun.
Penggunaan Vuex
tentu kalian bertanya-tanya kapan vuex di gunakan?, vuex digunakan apabila aplikasi kita semakin komplek sehingga data yang semakin banyak susah untuk dikelola, vuex merupakan pilihab yang cocok, akan tetapi jika program yang akan kita bangun masih sederhana cukup menggunakan props dan emit.
mari kita mulai!
Prasyarat
sebelum kita ke code, buka terminal anda mari install project vue.js terlebih dahulu, caranya dengan melakukan perintah pada command prompt atau terminal anda:
vue init webpack vuex-counter
Perintah diatas akan membuat project baru dengan nama vuex-counter dan untuk nama itu bisa di sesuaikan dengan keinginan anda, karena pada kesempatan kali ini pembahasannya menggunakan vuex jadi mari kita install juga vuex dengan menjalankan perintah sebagai berikut:
npm install vuex --save
Setelah kedua perintah sudah di jalankan mari setelah itu buka file peoject yang telah kita buat dengan menggunakan code-editor kesayangan anda. kemudian install juga addon Vue-Devtools pada web browser anda supaya memudahkan anda saat debug aplikasi dan memudahkan pada saat proses develop aplikasi.
berikut adalah contoh tampilannya aplikasi yang akan kita buat :
Tampilan Vue Devtools
Mulai Ngoding
Pertama buatlah buatlah folder baru bernama store dalam folder src kemudian buat file index.js dalam folder store kemudian ketikan script di bawah:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
getters: {
getCounter: state => {
return state.count
}
},
mutations: {
increment (state) {
state.count++
},
decrement (state) {
if(state.count > 0) {
state.count--
}
}
}
})
sebelumnya kita import dulu vue.js dan vuex nya agar code diatas dapat berjalan kita buat object instance dari vuex. State dalam object itu memiliki sebuah nilai namya count yang nilai defaultnya atau nilai standarnya 0,state sendiri perannya sebagai area untuk menyimpan data pada program kita, selanjutnya ada getters yang perannya untuk terhubung data dan umumnya dalam getters ini kita lakukan pemrosesan data ditambah dahulu saat sebelum datanya diambil, dalam getters itu kita membuat suatu function getCounter yang mereturn nilai count pada state, paling akhir ada mutations yang mana perannya untuk mengganti state atau data pada program kita, dalam mutations itu kita membuat dua function increment yang mana digunakan untuk menambahkan nilai pada state dan decrement yang berguna untuk kurangi nilai. Kemudian buat file component baru dengan nama Counter.vue pada folder src (src/components) dan isikan dengan script berikut:
<template>
<div id="app">
<div class="counter"> {{ counter }} </div>
<button @click="increment" class="increment"> Tambah </button>
<button @click="decrement" class="decrement"> Kurangi </button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$store.commit('increment')
},
decrement() {
this.$store.commit('decrement')
}
},
computed: {
counter() {
return this.$store.getters.getCounter
}
}
}
</script>
<style scoped>
#app {
width: 30%;
margin: 100px auto;
background: #f1f1f1;
padding: 15px;
}
.counter {
width: 70%;
padding: 50px 5px;
margin: 20px auto;
background: #3498db;
color:#fff;
font-size: 100px;
}
button {
border: 0;
padding: 13px 45px;
font-weight: bold;
margin-bottom: 20px;
}
.increment {
background: #2c3e50;
color: #fff;
}
.increment:hover {
transition: .7s;
opacity: 0.8;
cursor: pointer;
}
.decrement {
background: #c0392b;
color: #fff;
}
.decrement:hover {
transition: .7s;
opacity: 0.9;
cursor: pointer;
}
</style>
Sedikit penjelasan pada script diatas kita membuat sebuah computed properties bernama counter yg mana gunanya untuk menampilkan data statenya, kita menggunakan perintah this.$store.getters.getCounter yg mana fungsi getCounter mengacu pada fungsi getters yg ada pada file index.js yg sudah kita buat sebelumnya, kita juga bisa menggunakan helper sebenarnya untuk mengakses store maupun getters nya namun untuk kesederhanaan tutorial ini kita hanya akan menggunakan cara pertama saja. Kemudian setelah itu kita membuat dua methods yaitu increment dan decrement, kita menggunakan fungsi commit untuk mengeksekusi mutasinya, fungsi increment dan decrement sendiri digunakan untuk mengubah nilai pada state jika ada sebuah event klik terjadi, lalu pada bagian template nya seperti pada umumnya kita menampilkan counternya dan membuat dua buah button yg mana fungsinya untuk mengubah nilai sesuai fungsi masing-masing dan terakhir kita tambahkan sedikit style css untuk mempercantik tampilanya.
Setelah selesai bukalah file App.vue yg berada pada folder src lalu ubahlah scriptnya sehingga menjadi seperti berikut:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Disitu kita hanya hapus beberapa element yang tidak dibutuhkan.
Lalu kemudian bukalah file main.js yang ada pada folder src, selanjutnya editlah scriptnya sebagai berikut ini:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
Pada script di atas kita import file store/indeks.js dan menambahkan instance vuejs nya, Paling akhir ialah bukalah file router/indeks.js lalu isi dengan script berikut:
import Vue from 'vue'
import Router from 'vue-router'
import Counter from '@/components/Counter'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Counter',
component: Counter
}
]
})
Script diatas hanya inmport file component supaya dirender paling awal ketika pertama kali dijalankan, sebenarnya ini hanya opsi karena saya sudah terlanjur menginstall vue-router.
untuk menjalankan project mini kita kita bisa melakukan dengan perintah berikut pada command prompt atau terminal:
npm run dev
Apabila berhasil dan tidak memiliki error maka tampilannya akan terlihat seperti dibawah ini:
Tampilan akhir
untuk proses pengujian anda dapat klik button keduanya sesuai tidak dengan fungsinya masing-masing, semoga yang saya tulis pada artikel ini dapat dengan mudah dipahami oleh teman-teman semua.. masih banyak lagi yang belum kita pelajari dari vue seperti actions, module dan lainnya, mungkin bisa di lain kesempatan. semoga sehat selalu untuk kalian. Terimakasih :)