Håndtering State med Vuex in Vue.js- Omfattende vejledning og eksempler fra den virkelige verden

Vuex er et state administrationsbibliotek til Vue.js applikationer, der giver dig mulighed for at administrere og synkronisere data på tværs af forskellige component s i din applikation. Vuex implementerer Flux-arkitekturen, hvilket gør det nemt og effektivt at administrere applikationen state.

 

Nøglebegreber i Vuex bl.a

1. State

Inden repræsenterer state det Vuex centraliserede datalager for din applikation. Den indeholder applikationens data, der skal deles mellem forskellige component s. Her er et eksempel på at definere en state i Vuex:

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

 

2. Mutations

Mutations er ansvarlige for at ændre state i Vuex. De er synkrone funktioner, der tager strømmen state og nyttelasten som argumenter. Her er et eksempel på at definere 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 bruges til at håndtere asynkrone operationer og afsendelse mutations for at ændre state. De kan indeholde API-kald, asynkrone opgaver eller kompleks logik. Her er et eksempel på definition af 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 giver dig mulighed for at hente og beregne afledt state fra Vuex butikken. De er nyttige til at få adgang til og manipulere data, før de returneres til component s. Her er et eksempel på definition af 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 at installere Vuex i dit Vue.js projekt kan du følge disse trin

Trin 1: Installer Vuex via npm eller garn:

npm install vuex

eller

yarn add vuex

Trin 2: Opret en store.js  fil i rodmappen på dit projekt. Det er her, vi vil erklære og administrere applikationen state.

Trin 3: store.js  Importer Vuex og opret et nyt 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;

Trin 4: main.js  Importer butikken i filen og link den til 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');

Trin 5: Nu har du installeret og sat op Vuex i dit projekt. Du kan erklære dine state s, getters, mutations og actions i store.js filen og bruge dem i dine Vue component s.

Eksempel:

I store.js  filen kan du erklære en simpel state mutation som denne:

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

I en Vue component kan du bruge state og-mutationen ved at bruge funktionerne  og  : mapState mapMutations

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

Med disse trin har du installeret Vuex og kan bruge den til at administrere state din Vue.js applikation.

 

Med Vuex kan du nemt og konsekvent administrere applikationen state. Det forbedrer kodevedligeholdelse og genbrugbarhed, samtidig med at det giver en struktureret tilgang til datahåndtering.