Administrer State med omfattende veiledning og eksempler fra virkelige Vuex verden Vue.js

Vuex er et state administrasjonsbibliotek for Vue.js applikasjoner, som lar deg administrere og synkronisere data på tvers av forskjellige component s i applikasjonen din. Vuex implementerer Flux-arkitekturen, noe som gjør det enkelt og effektivt å administrere applikasjonen state.

 

Sentrale begreper i Vuex inkluderer

1. State

Innen representerer state det Vuex sentraliserte datalageret for applikasjonen din. Den inneholder applikasjonens data som må deles mellom forskjellige component s. Her er et eksempel på å definere en state i Vuex:

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

 

2. Mutations

Mutations er ansvarlige for å endre state i Vuex. De er synkrone funksjoner som tar strømmen state og nyttelasten som argumenter. Her er et eksempel på å definere en mutasjon i Vuex:

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

 

3. Actions

Actions brukes til å håndtere asynkrone operasjoner og sende mutations for å endre state. De kan inneholde API-kall, asynkrone oppgaver eller kompleks logikk. Her er et eksempel på hvordan du definerer en handling i 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 lar deg hente og beregne utledet state fra Vuex butikken. De er nyttige for å få tilgang til og manipulere data før de returneres til s component. Her er et eksempel på å definere en getter i 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;  
    }  
  }  
});

 

For å installere Vuex i Vue.js prosjektet ditt, kan du følge disse trinnene

Trinn 1: Installer Vuex via npm eller garn:

npm install vuex

eller

yarn add vuex

Trinn 2: Lag en store.js  fil i rotkatalogen til prosjektet ditt. Det er her vi vil deklarere og administrere applikasjonen state.

Trinn 3: store.js  Importer Vuex og opprett et nytt butikkobjekt i filen:

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;

Trinn 4: main.js  Importer butikken i filen og koble den til Vue-applikasjonen din:

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

Trinn 5: Nå har du installert og satt opp Vuex i prosjektet ditt. Du kan deklarere dine state s, getters, mutations og actions i store.js filen, og bruke dem i Vue- component ene dine.

Eksempel:

I store.js  filen kan du erklære en enkel state mutasjon som dette:

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

I en Vue component kan du bruke state og-mutasjonen ved å bruke  og-  funksjonene: mapState mapMutations

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

Med disse trinnene har du installert Vuex og kan bruke den til å administrere applikasjonen state din Vue.js.

 

Med Vuex kan du enkelt og konsekvent administrere applikasjonen state. Den forbedrer kodens vedlikeholdbarhet og gjenbrukbarhet, samtidig som den gir en strukturert tilnærming til databehandling.