Verwalten State mit Vuex in Vue.js – Umfassender Leitfaden und Beispiele aus der Praxis

Vuex ist eine state Verwaltungsbibliothek für Vue.js Anwendungen, mit der Sie Daten über verschiedene s in Ihrer Anwendung hinweg verwalten und synchronisieren können component. Vuex implementiert die Flux-Architektur und ermöglicht so eine einfache und effiziente Verwaltung der Anwendung state.

 

Zu den Schlüsselkonzepten Vuex gehören:

1. State

Das state in Vuex stellt den zentralen Datenspeicher für Ihre Anwendung dar. Es enthält die Daten der Anwendung, die von verschiedenen s gemeinsam genutzt werden müssen component. Hier ist ein Beispiel für die Definition eines state in Vuex:

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

 

2. Mutations

Mutations state sind für die Änderung der in verantwortlich Vuex. Es handelt sich um synchrone Funktionen, die den Strom state und die Nutzlast als Argumente verwenden. Hier ist ein Beispiel für die Definition einer Mutation in Vuex:

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

 

3. Actions

Actions werden verwendet, um asynchrone Vorgänge abzuwickeln und zu versenden, mutations um die state. Sie können API-Aufrufe, asynchrone Aufgaben oder komplexe Logik enthalten. Hier ist ein Beispiel für die Definition einer Aktion 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 state ermöglichen es Ihnen, abgeleitete Daten aus dem Speicher abzurufen und zu berechnen Vuex. Sie sind nützlich, um auf Daten zuzugreifen und sie zu bearbeiten, bevor sie an die component s zurückgegeben werden. Hier ist ein Beispiel für die Definition eines Getters 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;  
    }  
  }  
});

 

Zur Installation Vuex in Ihrem Vue.js Projekt können Sie die folgenden Schritte ausführen

Schritt 1: Installation Vuex über npm oder Yarn:

npm install vuex

oder

yarn add vuex

Schritt 2: Erstellen Sie eine store.js  Datei im Stammverzeichnis Ihres Projekts. Hier deklarieren und verwalten wir den Antrag state.

Schritt 3: store.js  Importieren und erstellen Sie in der Datei Vuex ein neues Store-Objekt:

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;

Schritt 4: Importieren Sie in der main.js  Datei den Store und verknüpfen Sie ihn mit Ihrer Vue-Anwendung:

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

Schritt 5: Vuex Jetzt haben Sie Ihr Projekt installiert und eingerichtet. Sie können Ihre state s, getters, mutations und actions in der store.js Datei deklarieren und sie in Ihren Vue component s verwenden.

Beispiel:

In der store.js  Datei können Sie eine einfache state Mutation wie folgt deklarieren:

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

In einem Vue component können Sie die state Mutation „and“ verwenden, indem Sie die  Funktionen „  and“ verwenden: mapState mapMutations

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

Mit diesen Schritten haben Sie die Installation erfolgreich abgeschlossen und können damit Ihre Anwendung Vuex verwalten. state Vue.js

 

Mit Vuex können Sie die Anwendung einfach und konsistent verwalten state. Es verbessert die Wartbarkeit und Wiederverwendbarkeit des Codes und bietet gleichzeitig einen strukturierten Ansatz für die Datenverwaltung.