Vue: Belajar Vuex Lagi

Belajar Lagi:
Tulisan ini dibuat setelah saya menggunakan vuex dan terlalu “dipaksakan” lalu setelah baca-baca lagi dokumentasi masih ada beberapa fitur dari vuex yang belum saya gunakan untuk memudahkan saya.

Apa itu vuex?

Menurut saya, vuex merupakan sentralisasi “data” atau kumpulan state yang memudahkan kita saat data atau state tersebut digunakan lintas komponen. Di vuex terdapat setidaknya 4 properti, state, getters, mutations, dan actions.

Bagi yang ingin tahu definisi yang benerannya silahkan kunjungi dokumentasi resmi vuex

Di tulisan yang pertama ini saya coba untuk cara paling standar dalam menggunakan vuex.

Untuk memasang vuex cukup menggunakan perintah:

npm i vuex

Dalam folder /src buat lagi folder store dan di dalamnya buat berkas dengan nama index.js, isi dengan script seperti berikut:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    
  },
  getters: {
    
  },
  mutations: {
    
  },
  actions: {
    
  },
});

Lalu di main.js kita tambahkan store yang telah disiapkan tadi, sehingga isi dari main.js menjadi

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

jika enggan konfigurasi manual, saat memasang aplikasi vue dengan vue-cli kita sudah dapat memasang plugin yang diinginkan, misalnya vue-route, vuex, dan sebagainya.

STATE

State dalam vuex merupakan objek yang properti di dalamnya bisa digunakan lintas komponen, misal kita punya state “name” maka di vuex ( saat saya tulis vuex berarti mengacu kepada store/index.js ) state nya kita ubah jadi seperti berikut

state: {
    name: 'John Doe',
  },

Maka di component manapun kita bisa memanggil state tersebut dengan cara:

...template
{{ this.$store.state.name }}

//outputnya
John Doe

Atau jika ingin lebih tertib bisa kita panggil melalui computed

...script
computed: {
   displayName() {
      return this.$store.state.name;
   }
}

...template
{{ displayName }}

//outputnya
John Doe

GETTERS

Getters ini mirip dengan computed properti, daripada memanggil langsung state dengan memanggil melalui getters kita bisa memanipulasi dulu datanya.

Untuk menggunakan getters kita cukup tambahkan method di getters pada vuex

getters: {
    getName(state) {
      return `Selamat Datang: ${state.name}`;
    },
  },

Parameter state di sana wajib ya agar kita bisa memanggil state yang ada. Cara menggunakan getters di template/komponen hampir mirip dengan sebelumnya

...script
computed: {
   displayName() {
      return this.$store.state.name;
   },
   greetName() {
    return this.$store.getters.getName;
  }
}

...template
{{ greetName }}

//outputnya
Selamat Datang: John Doe

MUTATIONS

Mutation bertanggung jawab untuk mengubah nilai state, kita tidak boleh mengubah langsung nilai state, kalau mau ubah wajib melalu mutations. Caranya hampir mirip dengan getters, tambahkan method pada mutations yang ada.

 mutations: {
    setName(state, payload) {
      state.name = payload;
    },
},

Parameter state di sana untuk kita bisa mengakses state yang ada, sedangkan parameter kedua yaitu payload merupakan data yang dikirimkan ke dalam method setName()

Cara pakai di komponen sebagai berikut:

...script
methods: {
changeName() {
      this.$store.commit('setName', 'John Tor');
    },
},
computed: {
   greetName() {
    return this.$store.getters.getName;
  }
}

...template
{{ greetName }}

//outputnya
Selamat Datang: John Tor

ACTIONS

Actions ini hampir mirip dengan mutation, jika mutation langsung mengubah state, maka action memicu mutation. Jika digambarkan sederhana seperti berikut.

Methods -> mutations -> state berubah

Methods->actions->mutations->state berubah.

Selain itu actions mendukung operasi asynchronous sehingga umumnya actions digunakan untuk komunikasi ke luar, nge-hit API misalnya.

Untuk membuat actions mirip juga yaitu tambahkan method di actions.

actions: {
    async fetchUserList({ commit }) {
      await axios.get('http://jsonplaceholder.typicode.com/users')
        .then((res) => {
          commit('someMutation', res.data);
        })
        .catch((e) => {
          commit('someMutation', e.message);
        });
    },
  },

Saya menambahkan method fetchUserlist dengan argument commit agar kita bisa memicu sebuah mutation. Saya di sana menggunakan axios untuk nge-hit API jsonplaceholder.

Cara pakai di komponen sebagai berikut

...script
methods: {
changeName() {
      this.$store.dispatch('fetchUserList');
    },
},

Untuk contoh lebih detail bisa lihat di sini:

https://gitlab.com/ariesmaulana/learn-vuex-part2

Topics