Ġestjoni State bi Vuex in Vue.js- Gwida Komprensiva u Eżempji tad-Dinja Reali

Vuex hija state librerija ta' ġestjoni għall Vue.js -applikazzjonijiet, li tippermettilek timmaniġġja u tissinkronizza d-dejta fuq component s differenti fl-applikazzjoni tiegħek. Vuex timplimenta l-arkitettura Flux, li tagħmilha faċli u effiċjenti biex timmaniġġja l-applikazzjoni state.

 

Kunċetti ewlenin Vuex jinkludu

1. State

L state -in Vuex tirrappreżenta l-maħżen tad-dejta ċentralizzat għall-applikazzjoni tiegħek. Hija żżomm id-data tal-applikazzjoni li jeħtieġ li tiġi kondiviża fost component s differenti. Hawn eżempju ta 'definizzjoni ta' state in Vuex:

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

 

2. Mutations

Mutations huma responsabbli biex jimmodifikaw l state -in Vuex. Huma funzjonijiet sinkroniċi li jieħdu l-kurrent state u t-tagħbija bħala argumenti. Hawn eżempju ta 'definizzjoni ta' mutazzjoni fi Vuex:

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

 

3. Actions

Actions huma użati biex jimmaniġġaw operazzjonijiet asinkroniċi u dispaċċ mutations biex jimmodifikaw il- state. Jistgħu jkun fihom sejħiet API, kompiti async, jew loġika kumplessa. Hawn eżempju ta 'definizzjoni ta' azzjoni fi 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 jippermettilek li tirkupra u tikkalkula derivati state ​​mill- Vuex maħżen. Huma utli għall-aċċess u l-manipulazzjoni tad-data qabel ma terġa 'lura lill- component s. Hawn eżempju ta 'definizzjoni ta' getter fi 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;  
    }  
  }  
});

 

Biex tinstalla Vuex fil-proġett tiegħek Vue.js, tista 'ssegwi dawn il-passi

Pass 1: Installa Vuex permezz ta' npm jew ħjut:

npm install vuex

jew

yarn add vuex

Pass 2: Oħloq store.js  fajl fid-direttorju tal-għeruq tal-proġett tiegħek. Dan huwa fejn se niddikjaraw u namministraw l-applikazzjoni state.

Pass 3: Fil- store.js  fajl, importa Vuex u oħloq oġġett ġdid tal-maħżen:

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;

Pass 4: Fil- main.js  fajl, importa l-maħżen u għaqqadha mal-applikazzjoni Vue tiegħek:

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

Pass 5: Issa għandek installat u waqqaft Vuex fil-proġett tiegħek. Tista' tiddikjara state s, getters, mutations, u tiegħek actions fil- store.js fajl, u tużahom fil-Vue tiegħek component.

Eżempju:

Fil- store.js  fajl, tista 'tiddikjara state mutazzjoni sempliċi u bħal din:

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

F'Vue component, tista' tuża l- state mutazzjoni u billi tuża l- funzjonijiet  u  : mapState mapMutations

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

B'dawn il-passi, installajt b'suċċess Vuex u tista 'tużaha biex tmexxi l- applikazzjoni state tiegħek Vue.js.

 

Bil Vuex, tista 'faċilment u konsistenti timmaniġġja l-applikazzjoni state. Ittejjeb il-manutenzjoni u l-użu mill-ġdid tal-kodiċi, filwaqt li tipprovdi approċċ strutturat għall-ġestjoni tad-dejta.