Was ist Vuex und wofür wird es verwendet?
Vuex ist eine Statusverwaltungsbibliothek für Vue.js-Anwendungen. Sie bietet einen zentralen Speicher für alle Komponenten einer Anwendung, sodass Sie den Status Ihrer Anwendung auf konsistente und vorhersehbare Weise verwalten können. Vuex ist für die nahtlose Zusammenarbeit mit Vue.js konzipiert und ist besonders nützlich bei groß angelegten Anwendungen, bei denen die Statusverwaltung über mehrere Komponenten hinweg komplex werden kann.
Kernkonzepte von Vuex
Bei Vuex dreht es sich um einige Kernkonzepte, die dabei helfen, den Anwendungsstatus effektiv zu verwalten:
- Store: Das zentrale Repository für den Status der Anwendung. Es enthält die Daten und ermöglicht Komponenten den Zugriff und die Aktualisierung.
- Status: Die im Vuex-Store gespeicherten Daten. Sie stellen den Anwendungsstatus dar, der von mehreren Komponenten gemeinsam genutzt werden kann.
- Getter: Funktionen, die abgeleitete Zustände basierend auf dem Zustand des Stores abrufen und berechnen. Sie ähneln berechneten Eigenschaften in Vue-Komponenten.
- Mutationen: Funktionen, die den Status ändern. Mutationen müssen synchron sein und sind die einzige Möglichkeit, den Status in Vuex zu ändern.
- Aktionen: Funktionen, die asynchrone Operationen ausführen und Mutationen festschreiben können. Aktionen können verwendet werden, um komplexe Logik und Nebeneffekte zu verarbeiten.
- Module: Eine Möglichkeit, Vuex-Stores in kleinere, handhabbare Teile zu organisieren. Jedes Modul kann seinen eigenen Status, seine eigenen Mutationen, Aktionen und Getter haben.
Einrichten von Vuex in einem Vue.js-Projekt
Um Vuex in Ihrem Vue.js-Projekt zu verwenden, folgen Sie diesen Schritten:
- Installieren Sie Vuex: Zuerst müssen Sie Vuex über npm installieren. Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:
npm install vuex
- Erstellen Sie einen Vuex Store: Erstellen Sie eine neue Datei mit dem Namen
store.js
in Ihremsrc
-Verzeichnis. Definieren Sie Ihren Vuex Store in dieser Datei:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit }) {
commit('increment');
}
},
getters: {
count: state => state.count
}
});
In diesem Beispiel hat der Store einen Status mit einer Anzahl
-Eigenschaft, eine Mutation zum Erhöhen der Anzahl, eine Aktion zum Festschreiben der Mutation und einen Getter zum Abrufen der Anzahl.
- Integrieren Sie Vuex in Ihre Vue-Anwendung: Öffnen Sie
src/main.js
und importieren Sie den Vuex-Store. Fügen Sie ihn der Vue-Instanz hinzu:
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
Verwenden von Vuex in Vue-Komponenten
Sobald Vuex integriert ist, können Sie auf den Status, die Mutationen und die Aktionen des Stores innerhalb Ihrer Vue-Komponenten zugreifen. Hier ist ein Beispiel für die Verwendung von Vuex in einer Komponente:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.getters.count;
}
},
methods: {
increment() {
this.$store.dispatch('increment');
}
}
};
</script>
In dieser Komponente:
- Berechnete Eigenschaft: Die berechnete Eigenschaft
Anzahl
ruft mithilfe eines Getters die aktuelle Anzahl aus dem Vuex-Speicher ab. - Methode: Die Methode
increment
versendet die Aktionincrement
, um den Status zu aktualisieren.
Wann Sie Vuex verwenden sollten
Vuex ist besonders in den folgenden Szenarien nützlich:
- Großanwendungen: Wenn die Verwaltung komplexer Zustände über mehrere Komponenten hinweg schwierig wird.
- Gemeinsam genutzter Status: Wenn Sie den Status zwischen verschiedenen Komponenten oder Ansichten gemeinsam nutzen müssen.
- Komplexe Zustandsverwaltung: Wenn Sie asynchrone Vorgänge oder komplexe Zustandsänderungen durchführen müssen.
Abschluss
Vuex ist ein leistungsstarkes Tool zur Statusverwaltung in Vue.js-Anwendungen. Es bietet einen zentralen Speicher und eine Reihe von Prinzipien für die vorhersehbare und organisierte Handhabung von Statusänderungen. Wenn Sie Vuex verstehen und nutzen, können Sie den Anwendungsstatus effektiv verwalten, was die Erstellung und Wartung komplexer Vue.js-Anwendungen erleichtert.