Mengurus State dengan Vuex dalam Vue.js- Panduan Komprehensif dan Contoh Dunia Nyata

Vuex ialah state perpustakaan pengurusan untuk Vue.js aplikasi, membolehkan anda mengurus dan menyegerakkan data merentas component s yang berbeza dalam aplikasi anda. Vuex melaksanakan seni bina Flux, menjadikannya mudah dan cekap untuk mengurus aplikasi state.

 

Konsep utama dalam Vuex termasuk

1. State

In mewakili stor data berpusat untuk aplikasi anda state. Vuex Ia menyimpan data aplikasi yang perlu dikongsi antara component s yang berbeza. Berikut ialah contoh mentakrifkan state dalam Vuex:

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

 

2. Mutations

Mutations bertanggungjawab untuk mengubah suai state dalam Vuex. Ia adalah fungsi segerak yang mengambil arus state dan muatan sebagai hujah. Berikut ialah contoh mentakrifkan mutasi dalam 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 mengendalikan operasi tak segerak dan penghantaran mutations untuk mengubah suai state. Ia boleh mengandungi panggilan API, tugas async atau logik kompleks. Berikut ialah contoh mentakrifkan tindakan dalam 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 membolehkan anda mendapatkan semula dan mengira yang diperoleh state daripada Vuex kedai. Mereka berguna untuk mengakses dan memanipulasi data sebelum mengembalikannya ke component s. Berikut ialah contoh untuk menentukan pengambil dalam 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 memasang Vuex dalam Vue.js projek anda, anda boleh mengikuti langkah ini

Langkah 1: Pasang Vuex melalui npm atau benang:

npm install vuex

atau

yarn add vuex

Langkah 2: Buat store.js  fail dalam direktori akar projek anda. Di sinilah kami akan mengisytiharkan dan menguruskan permohonan itu state.

Langkah 3: Dalam store.js  fail, import Vuex dan buat objek kedai baharu:

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  fail, import kedai dan pautkannya 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 memasang dan menyediakan Vuex dalam projek anda. Anda boleh mengisytiharkan state s anda, getters, mutations, dan actions dalam store.js fail, dan menggunakannya dalam Vue component s anda.

Contoh:

Dalam store.js  fail, anda boleh mengisytiharkan mudah state dan mutasi seperti ini:

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

Dalam Vue component, anda boleh menggunakan state mutasi dan dengan menggunakan fungsi  dan  : mapState mapMutations

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

Dengan langkah ini, anda telah berjaya memasang Vuex dan boleh menggunakannya untuk mengurus aplikasi state anda Vue.js.

 

Dengan Vuex, anda boleh mengurus aplikasi dengan mudah dan konsisten state. Ia meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod, sambil menyediakan pendekatan berstruktur kepada pengurusan data.