Hantera State med Vuex in Vue.js- Omfattande guide och exempel från verkliga världen

Vuex är ett state hanteringsbibliotek för Vue.js applikationer, som låter dig hantera och synkronisera data över olika component s i din applikation. Vuex implementerar Flux-arkitekturen, vilket gör det enkelt och effektivt att hantera applikationen state.

 

Nyckelbegrepp i Vuex inkluderar

1. State

In representerar det centraliserade datalagret för din applikation state. Vuex Den innehåller applikationens data som måste delas mellan olika component s. Här är ett exempel på hur du definierar en state i Vuex:

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

 

2. Mutations

Mutations är ansvariga för att ändra state i Vuex. De är synkrona funktioner som tar strömmen state och nyttolasten som argument. Här är ett exempel på hur man definierar en mutation i Vuex:

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

 

3. Actions

Actions används för att hantera asynkrona operationer och sändning mutations för att modifiera state. De kan innehålla API-anrop, asynkrona uppgifter eller komplex logik. Här är ett exempel på hur du definierar en åtgärd 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 låter dig hämta och beräkna härledda state från Vuex butiken. De är användbara för att komma åt och manipulera data innan de returneras till component s. Här är ett exempel på hur man definierar 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;  
    }  
  }  
});

 

För att installera Vuex i ditt Vue.js projekt kan du följa dessa steg

Steg 1: Installera Vuex via npm eller garn:

npm install vuex

eller

yarn add vuex

Steg 2: Skapa en store.js  fil i rotkatalogen för ditt projekt. Det är här vi kommer att deklarera och hantera applikationen state.

Steg 3: store.js  Importera Vuex och skapa ett nytt butiksobjekt 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;

Steg 4: main.js  Importera butiken i filen och länka den till din Vue-applikation:

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

Steg 5: Nu har du installerat och konfigurerat Vuex i ditt projekt. Du kan deklarera dina state s, getters, mutations, och actions i store.js filen och använda dem i dina Vue component s.

Exempel:

I store.js  filen kan du deklarera en enkel state och mutation så här:

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

I en Vue component kan du använda state mutationen och genom att använda  funktionerna  och: mapState mapMutations

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

Med dessa steg har du framgångsrikt installerat Vuex och kan använda det för att hantera state din Vue.js applikation.

 

Med Vuex kan du enkelt och konsekvent hantera applikationen state. Det förbättrar kodunderhåll och återanvändbarhet, samtidigt som det ger ett strukturerat tillvägagångssätt för datahantering.