Valdymas State naudojant – išsamų Vuex vadovą Vue.js ir realaus pasaulio pavyzdžius

Vuex yra programų state valdymo biblioteka Vue.js, leidžianti valdyti ir sinchronizuoti duomenis įvairiose component programose. Vuex įdiegia „Flux“ architektūrą, todėl programą lengva ir efektyviai valdyti state.

 

Pagrindinės sąvokos Vuex apima

1. State

In reiškia centralizuotą jūsų programos duomenų saugyklą state. Vuex Jame yra programos duomenys, kuriuos reikia bendrinti tarp skirtingų component s. Štai pavyzdys, kaip state apibrėžti Vuex:

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

 

2. Mutations

Mutations yra atsakingi už state in Vuex. Tai yra sinchroninės funkcijos, kurios kaip argumentus priima srovę state ir naudingą apkrovą. Štai pavyzdys, kaip apibrėžti mutaciją Vuex:

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

 

3. Actions

Actions naudojami asinchroninėms operacijoms tvarkyti ir siuntimui mutations modifikuoti state. Juose gali būti API iškvietimų, asinchronizavimo užduočių arba sudėtingos logikos. Štai veiksmo apibrėžimo pavyzdys 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 leidžia gauti ir apskaičiuoti gautus duomenis state iš Vuex parduotuvės. Jie naudingi norint pasiekti duomenis ir juos manipuliuoti prieš grąžinant juos į component s. Pateikiame geterio apibrėžimo pavyzdį 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;  
    }  
  }  
});

 

Norėdami įdiegti Vuex savo Vue.js projekte, galite atlikti šiuos veiksmus

1 veiksmas: įdiekite Vuex per npm arba siūlą:

npm install vuex

arba

yarn add vuex

2 veiksmas: sukurkite store.js  failą savo projekto šakniniame kataloge. Čia mes deklaruosime ir tvarkysime paraišką state.

3 veiksmas: faile store.js  importuokite Vuex ir sukurkite naują parduotuvės objektą:

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;

4 veiksmas: faile main.js  importuokite parduotuvę ir susiekite ją su „Vue“ programa:

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

5 veiksmas: dabar įdiegėte ir nustatėte Vuex savo projektą. Galite deklaruoti savo state s, getters, mutations ir actions faile store.js ir naudoti juos savo Vue component s.

Pavyzdys:

Faile store.js  galite deklaruoti paprastą state mutaciją, kaip ši:

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

„Vue“ component galite naudoti state ir mutaciją naudodami  ir  funkcijas: mapState mapMutations

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

Atlikę šiuos veiksmus, sėkmingai įdiegėte ir galite naudoti ją savo programai Vuex tvarkyti. state Vue.js

 

Naudodami Vuex, galite lengvai ir nuosekliai valdyti programą state. Tai pagerina kodo priežiūros ir pakartotinio naudojimo galimybes, kartu suteikia struktūrinį duomenų valdymo metodą.