Beheren State met Vuex in Vue.js- Uitgebreide gids en praktijkvoorbeelden

Vuex is een state beheerbibliotheek voor Vue.js toepassingen, waarmee u gegevens over verschillende programma's in uw toepassing kunt beheren en synchroniseren component. Vuex implementeert de Flux-architectuur, waardoor het eenvoudig en efficiënt is om de applicatie te beheren state.

 

Sleutelbegrippen in Vuex omvatten

1. State

De state in Vuex staat voor het gecentraliseerde gegevensarchief voor uw toepassing. Het bevat de gegevens van de toepassing die tussen verschillende programma's moeten worden gedeeld component. Hier is een voorbeeld van het definiëren van een state in Vuex:

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

 

2. Mutations

Mutations zijn verantwoordelijk voor het wijzigen van de state in Vuex. Het zijn synchrone functies die de huidige state en payload als argumenten nemen. Hier is een voorbeeld van het definiëren van een mutatie in Vuex:

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

 

3. Actions

Actions worden gebruikt om asynchrone bewerkingen af ​​te handelen en verzending mutations om de state. Ze kunnen API-aanroepen, asynchrone taken of complexe logica bevatten. Hier is een voorbeeld van het definiëren van een actie in 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 kunt u ophalen en berekenen afgeleid state van de Vuex winkel. Ze zijn handig voor toegang tot en het manipuleren van gegevens voordat ze worden teruggestuurd naar de component s. Hier is een voorbeeld van het definiëren van een getter in 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;  
    }  
  }  
});

 

Om Vuex in uw Vue.js project te installeren, kunt u deze stappen volgen

Stap 1: Installeer Vuex via npm of garen:

npm install vuex

of

yarn add vuex

Stap 2: Maak een store.js  bestand aan in de hoofdmap van uw project. Hier declareren en beheren wij de aanvraag state.

Stap 3: store.js  Importeer Vuex en maak een nieuw winkelobject in het bestand:

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;

Stap 4: main.js  Importeer de winkel in het bestand en koppel deze aan uw Vue-applicatie:

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

Stap 5: Nu heb je geïnstalleerd en ingesteld Vuex in je project. state U kunt uw s, getters, mutations, en aangeven actions in het store.js bestand en deze gebruiken in uw Vue component s.

Voorbeeld:

In het bestand kunt u een eenvoudige en mutatie als volgt store.js  declareren: state

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

In een Vue component kunt u de state mutatie en gebruiken door de functies  en te gebruiken  : mapState mapMutations

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

Met deze stappen heeft u de installatie succesvol uitgevoerd Vuex en kunt u deze gebruiken om state uw Vue.js applicatie te beheren.

 

Met Vuex kunt u de applicatie eenvoudig en consistent beheren state. Het verbetert de onderhoudbaarheid en herbruikbaarheid van code en biedt tegelijkertijd een gestructureerde benadering van gegevensbeheer.