Post Detail

Ketika mengerjakan project kita jangan setengah - setengah maka explore sampai kekulit-kulitnya, contohnya disini saya baru sedikit paham tentang point dari Vuex. Kalo kita lihat dari dokumentasinya Vuex adalah patern state management yang dimana perputaran dari data terpusat sehingga vuex ini bila project kita sudah bersekala besar maka sangat penting banget untuk vuex ini kita gunakan.

Untuk dokumentasi resmi dari vuex ada di https://vuex.vuejs.org/ dan kita bisa lihat lifecycle dari vuex seperti dibawah ini:

Jadi Vuex ini sebuah library seperti halnya vue-router namun secara fungsi berbeda, kalo vue-router itu buat nanganin yang berhubungan dengan url route. Kalo vuex ini yang nanganin state management data, dalam hal ini di simpan dalam memory sementara. Bukan localStorage ya, karena vuex ini state temporary yang dimana jika kita refresh misalkan di berbeda halaman maka akan hilang datanya, karena temporary. Namun jika kita lihat dari lifecycle vuex ini sangat bermanfaat sekali untuk menghemat Hit atau request keserver. Contohnya misalkan profile user yang dimana biasanya kita lakukan request ulang namun dengan adanya vuex maka kita hanya sekali request saja ke server kecuali kalo halamannya di refresh maka kita perlu request ulang ke API Profilenya.

Sebelum kita sedikit implementasi vuex, berikut langkah - langkahnya.

Tahap #1 : Buat Project 

Untuk membuat project vuejs saya sebelumnya pernah membuat artikel tentang create project di vuejs silahkan ikuti sampai benar - benar jalan project vuejsnya.

Tahap #2: Install Vuex

npm install vuex --save

Tahap #3: Folder store

Buat folder store didalam folder src kemudian buat juga file didalam folder store tersebut dengan nama file index.js  dengan isi kodingan seperti ini :

import {createStore} from 'vuex'

const store = createStore({
    state: {
        count: 0
    },
    getters: {
        getCounter(state){
            return state.count;
        }
    },
    mutations: {
        increment(state){
            state.count++;
        },
        decrement(state){
            if(state.count > 0){
                state.count--
            }
        }
    }
});

export default store;

Untuk contoh rasanya cukup, biar bisa di panggil vuexnya maka kita perlu registerkan ke main.js dengan contoh kodingan menjadi seperti ini :

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

Terakhir di App.vue isikan contoh kodingan seperti ini :

<script setup>
</script>

<template>
  <div>
    {{counter}}
    <button @click="increment">Penambahan</button>
    <button @click="decrement">Penambahan</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>
#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>

Maka contoh Outputnya seperti ini :

Sebetulnya pemanfaatannya masih banyak lagi disini kita belum integrasikan dengan API, tapi secara lifecyclenya seperti itu. Demikian artikel pendeknya lain kali saya buatkan versi videonya biar lebih detail.