Kezelés in- Átfogó State útmutatóval és valós példákkal Vuex Vue.js

Vuex egy state felügyeleti könyvtár Vue.js az alkalmazások számára, amely lehetővé teszi az adatok kezelését és szinkronizálását component az alkalmazás különböző részein. Vuex megvalósítja a Flux architektúrát, megkönnyítve és hatékonyan kezelve az alkalmazást state.

 

A kulcsfogalmak közé Vuex tartozik

1. State

Az state in Vuex az alkalmazás központi adattárát jelöli. Ez tartalmazza az alkalmazás azon adatait, amelyeket meg kell osztani a különböző component alkalmazások között. state Íme egy példa egy in meghatározására Vuex:

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

 

2. Mutations

Mutations felelősek az state in módosításáért Vuex. Ezek szinkron függvények, amelyek state argumentumként veszik az áramot és a hasznos terhelést. Íme egy példa a mutáció meghatározására Vuex:

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

 

3. Actions

Actions az aszinkron műveletek kezelésére és az elküldésre használják mutations a state. Tartalmazhatnak API-hívásokat, aszinkron feladatokat vagy összetett logikát. Íme egy példa egy művelet meghatározására itt 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 state lehetővé teszi az áruházból származó adatok lekérését és kiszámítását Vuex. Hasznosak az adatok eléréséhez és kezeléséhez, mielőtt visszaküldenék azokat az component s-be. Íme egy példa a getter meghatározására a következőben 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;  
    }  
  }  
});

 

Vuex A projektbe való telepítéshez Vue.js kövesse az alábbi lépéseket

1. lépés: Telepítés Vuex npm-en vagy fonallal:

npm install vuex

vagy

yarn add vuex

2. lépés: Hozzon létre egy store.js  fájlt a projekt gyökérkönyvtárában. Itt nyilatkozunk és kezeljük a pályázatot state.

3. lépés: A store.js  fájlban importáljon Vuex és hozzon létre egy új áruházobjektumot:

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. lépés: A fájlban main.js  importálja az áruházat, és kapcsolja össze a Vue alkalmazással:

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

5. lépés: Most már telepítette és beállította Vuex a projektet. Deklarálhatja state az s, getters, mutations, és actions a fájlban store.js, és használja őket a Vue component s.

Példa:

A fájlban store.js  deklarálhat egy state ilyen egyszerű mutációt:

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

A Vue-ban a és a mutációt a  és függvényekkel component használhatja  : state mapState mapMutations

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

Ezekkel a lépésekkel sikeresen telepítette, Vuex és használhatja az state alkalmazás kezeléséhez Vue.js.

 

A segítségével Vuex egyszerűen és következetesen kezelheti az alkalmazást state. Javítja a kód karbantarthatóságát és újrafelhasználhatóságát, miközben strukturált megközelítést biztosít az adatkezeléshez.