Mengelola State dengan Vuex- Vue.js Panduan Lengkap dan Contoh Dunia Nyata

Vuex adalah state pustaka manajemen untuk Vue.js aplikasi, memungkinkan Anda mengelola dan menyinkronkan data di berbagai component perangkat dalam aplikasi Anda. Vuex mengimplementasikan arsitektur Flux, membuatnya mudah dan efisien untuk mengelola aplikasi state.

 

Konsep kunci Vuex termasuk

1. State

in mewakili penyimpanan data terpusat untuk aplikasi Anda state. Vuex Itu menyimpan data aplikasi yang perlu dibagikan di antara component pengguna yang berbeda. Berikut adalah contoh mendefinisikan a state di Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations bertanggung jawab untuk memodifikasi state di Vuex. Mereka adalah fungsi sinkron yang mengambil arus state dan muatan sebagai argumen. Berikut adalah contoh mendefinisikan mutasi di Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {  
    increment(state) {
      state.count++;  
    },  
    decrement(state) {
      state.count--;  
    }  
  }  
});

 

3. Actions

Actions digunakan untuk menangani operasi asinkron dan pengiriman mutations untuk memodifikasi file state. Mereka dapat berisi panggilan API, tugas asinkron, atau logika kompleks. Berikut adalah contoh mendefinisikan tindakan di Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters memungkinkan Anda untuk mengambil dan menghitung yang berasal state dari Vuex toko. Mereka berguna untuk mengakses dan memanipulasi data sebelum mengembalikannya ke s component. Berikut adalah contoh mendefinisikan pengambil di Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

Untuk menginstal Vuex di Vue.js proyek Anda, Anda dapat mengikuti langkah-langkah ini

Langkah 1: Instal Vuex melalui npm atau benang:

npm install vuex

atau

yarn add vuex

Langkah 2: Buat store.js  file di direktori root proyek Anda. Di sinilah kami akan mendeklarasikan dan mengelola aplikasi state.

Langkah 3: Di store.js  file, impor Vuex dan buat objek penyimpanan baru:

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

Langkah 4: Dalam main.js  file, impor toko dan tautkan ke aplikasi Vue Anda:

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

Langkah 5: Sekarang Anda telah menginstal dan menyiapkan Vuex proyek Anda. Anda dapat mendeklarasikan state s, getters, mutations, dan actions dalam store.js file, dan menggunakannya dalam Vue component s.

Contoh:

Di store.js  file tersebut, Anda dapat mendeklarasikan mutasi sederhana state dan seperti ini:

const store = new Vuex.Store({
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {
      state.count++;  
    }  
  }  
});

Dalam Vue component, Anda dapat menggunakan state and mutasi dengan menggunakan fungsi  and  : mapState mapMutations

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

Dengan langkah-langkah ini, Anda telah berhasil menginstal Vuex dan dapat menggunakannya untuk mengelola aplikasi state Anda Vue.js.

 

Dengan Vuex, Anda dapat mengelola aplikasi dengan mudah dan konsisten state. Ini meningkatkan pemeliharaan dan penggunaan kembali kode, sambil memberikan pendekatan terstruktur untuk manajemen data.