Ausführliche Erklärung und Beispiele für die Verwendung von Vuex zur Verwaltung des globalen Status in Vue

Vue.js ist ein beliebtes Front-End-Framework, das viele praktische Funktionen bietet. Wenn die Anwendung jedoch immer komplexer wird, werden wir schnell feststellen, dass die Übergabe großer Datenmengen an untergeordnete Komponenten sehr schwierig wird. Aus diesem Grund wird Vuex in Vue so wichtig. Vuex ist ein globaler Statusmanager, der den Austausch von Daten und Status vereinfacht. In diesem Artikel werfen wir einen genaueren Blick auf die Funktionsweise von Vuex und zeigen, wie Sie es in Ihre Vue-Anwendung integrieren.

Was ist Vuex

Vuex ist ein Zustandsverwaltungsmuster und eine Bibliothek für Vue.js-Anwendungen. Es wird häufig zur Lösung von Problemen bei der stufenübergreifenden, mehrkomponenten- und mehrseitigen Zustandsfreigabe verwendet. Es zentralisiert den Anwendungsstatus in einem einzigen Speicher und bietet einen Mechanismus zum Implementieren eines gemeinsamen Status. Wird verwendet, um alle Zustände einer Anwendung während ihres gesamten Lebenszyklus zu verwalten.

Das Kernkonzept von Vuex

Vuex besteht aus den folgenden vier Kernteilen:

state

State ist der von Vuex verwaltete Speicherbereich für den Anwendungsstatus. State ist ein einfaches JavaScript-Objekt, das zum Speichern des Status einer Anwendung verwendet wird. Wenn wir den Zustand deklarieren, definieren wir ein Objekt. Das folgende Beispiel definiert ein einfaches Statusobjekt:

const state = {
    count: 0
}

getter

Getter wird verwendet, um Daten aus dem Status abzurufen. Die erhaltenen Daten können nach einer gewissen Verarbeitung basierend auf dem aktuellen Status zurückgegeben werden, ähnlich den berechneten Eigenschaften des Status.

const getters = {
  getCount(state) {
    return state.count + 1;
  }
}

Mutationen

Mutationen werden verwendet, um den einseitigen Datenbetrieb sicherzustellen, d. h. Mutationen können die Daten ändern, aber keine Daten erhalten. Mutation wird zum Ändern des Status verwendet und kann nicht asynchron ausgeführt werden. Um den Status zu ändern, müssen Sie die Commit-Methode verwenden.

const mutations = {
  increment(state) {
    state.count++
  }
}

Aktionen

Aktionen werden zur Abwicklung asynchroner Vorgänge verwendet, Aktionen lösen tatsächlich Standardmutationen aus. Es ermöglicht Ihnen, alle Statusaktualisierungen zu kapseln, ohne ihn direkt zu ändern. Wenn wir beispielsweise eine asynchrone Anfrage in der Anwendung senden möchten, können wir nebenbei eine Aktion aufrufen, um diese zu verarbeiten.

const actions = {
   incrementByAsync({commit}) {
     setTimeout(() => {
       commit('incrementByAsync')
     }, 1000)
   }
 }

Implementierung eines Vuex-Gegenbeispiels

Wir werden mein eigenes exponiertes [Vue-cli 3](https://www.npmjs.com/package/vue-cli) Beispielprojekt verwenden, um ein Vue-Projekt über das offizielle Gerüst zu initialisieren .

$ vue create vuex-example

Nächste Installation von vuex:

$ npm install vuex --save

Als Nächstes erstellen wir ein einfaches Beispiel für eine Zähleranwendung zum Erhöhen und Verringern von Zahlen. Wir werden jedoch Vuex verwenden, um den Status dieses Zählers zu verwalten. Zuerst erstellen wir eine neue Datei „store.js“ im Ordner „src“ des Projekts. Dies ist unser Vuex-Shop.

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    actions: {
        increment({commit}) {
            commit('increment');
        },
        decrement({commit}) {
            commit('decrement');
        }
    },
    getters: {
        getCount(state) {
            return state.count;
        }
    }
});

export default store;

Im obigen Code haben wir zuerst Vuex und Vue importiert. Dann haben wir Vuex mit der Methode Vue.use() installiert. Wir definieren ein einfaches Statusobjekt, um den aktuellen Zählerwert zu speichern. Wir definieren außerdem zwei Mutationen, die zum Erhöhen und Verringern des aktuellen Zählerwerts verwendet werden. Wir definieren zwei Aktionen, eine zum Durchführen einer Erhöhungsoperation und eine andere zum Durchführen einer Verringerungsoperation. Schließlich definieren wir einen Getter, um den aktuellen Zählerwert zu erhalten.

Als nächstes übernehmen wir die Änderungen und verwenden Vuex und speichern in App.vue:

<template>
  <div id="app">
    <h3>{{ count }}</h3>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import store from './store';

export default {
  name: 'app',
  store,
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>

In dieser Datei importieren wir das Vuex-Store-Modul. In der Vue-Instanz mischen wir das Store-Objekt ein, sodass der Vuex-Status in der gesamten Anwendung verwendet werden kann. Als nächstes definieren wir eine berechnete Eigenschaft, um den aktuellen Zählerwert zu erhalten. Wir definieren außerdem zwei Methoden zum Erhöhen und Verringern des aktuellen Zählerwerts. Wir verwenden die Dispatch-Methode, um diese Aktionen separat aufzurufen.

Abschließend übergeben wir den Store an die Vue-Instanz, damit in der Anwendung auf den Status im Store zugegriffen werden kann. Jetzt können Sie Ihren Browser öffnen, in die Anwendung gehen und einen einfachen Zähler sehen. Wenn Sie auf die Schaltfläche klicken, wird der aktuelle Zählerwert erhöht oder verringert.

Zusammenfassung

Vuex ist ein Statusverwaltungsmuster und eine Bibliothek für Vue.js-Anwendungen, die den Austausch von Daten und Status erleichtern. State, Getter, Mutation und Action sind die Kernkonzepte von Vuex. Durch eine gründliche Beherrschung können Entwickler flexibler mit Zustandsänderungen in Vuex umgehen. Auf dieser Grundlage haben wir ein Timer-Beispielprogramm erstellt, um die Verwendung von Vuex zu demonstrieren. Wenn Sie Vuex genauer kennenlernen möchten, schauen Sie sich die offizielle Dokumentation an.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung und Beispiele für die Verwendung von Vuex zur Verwaltung des globalen Status in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!