Erfahren Sie schnell, wie Sie mit der Vuex-Statusverwaltung in Vue3.0 beginnen

Vuex ist ein speziell für Vue.js-Anwendungen entwickeltes Zustandsverwaltungsmuster. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen. Vuex ist außerdem in das offizielle Debugging-Tool devtools von Vue integriert und bietet erweiterte Debugging-Funktionen wie Time-Travel-Debugging ohne Konfiguration, Importieren und Exportieren von Status-Snapshots usw.
Wenn Sie nicht vorhaben, eine große Einzelseitenanwendung zu entwickeln, kann die Verwendung von Vuex umständlich und überflüssig sein. Es stimmt – wenn Ihre App einfach genug ist, sollten Sie Vuex wahrscheinlich besser nicht verwenden. Ein einfaches Ladenmuster ist alles, was Sie brauchen. Wenn Sie jedoch eine mittlere bis große Einzelseitenanwendung erstellen müssen, werden Sie höchstwahrscheinlich darüber nachdenken, wie Sie den Status außerhalb der Komponente besser verwalten können. In diesem Fall ist Vuex die naheliegende Wahl.

1. Staat

Da der Statusspeicher von Vuex reagiert, besteht die einfachste Möglichkeit, den Status aus der Store-Instanz zu lesen, darin, einen Status in einer berechneten Eigenschaft zurückzugeben:

importiere {berechnet} von 'vue'
importiere { useStore } von 'vuex'
Standard exportieren {
  aufstellen () {
    const store = useStore()
    zurückkehren {
      Anzahl: berechnet(() => store.state.count)
    }
  }
}

Getter

Mit Vuex können wir im Store „Getter“ definieren (die man sich als berechnete Eigenschaften des Stores vorstellen kann). Genau wie berechnete Eigenschaften wird der Rückgabewert eines Getters basierend auf seinen Abhängigkeiten zwischengespeichert und nur neu berechnet, wenn sich die Werte seiner Abhängigkeiten ändern.

importiere {berechnet} von 'vue'
importiere { useStore } von 'vuex'
Standard exportieren {
  aufstellen () {
    const store = useStore()
    zurückkehren {
      doppelt: berechnet(() => store.getters.double)
    }
  }
}

Mutationen

Die einzige Möglichkeit, den Status im Vuex-Store zu ändern, besteht darin, eine Mutation zu übermitteln. Mutationen in Vuex sind Ereignissen sehr ähnlich: Jede Mutation hat einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler). In dieser Rückruffunktion nehmen wir tatsächlich die Statusänderung vor und sie erhält den Status als erstes Argument:

const store = erstelleStore({
  Zustand: {
    Anzahl: 1
  },
  Mutationen:
    Inkrement(Zustand) {
      Zustand.Anzahl++
    }
  }
})

Sie können einen Mutationshandler nicht direkt aufrufen. Diese Option ähnelt eher einer Ereignisregistrierung: „Wenn eine Mutation vom Typ Inkrement ausgelöst wird, rufen Sie diese Funktion auf.“ Um einen Mutationshandler aufzurufen, müssen Sie die Methode store.commit mit dem entsprechenden Typ aufrufen:

store.commit('Erhöhen')

Aktionen

Die Aktion ähnelt der Mutation, außer dass:
Die Aktion übermittelt eine Mutation, anstatt den Status direkt zu ändern.
Die Aktion kann beliebige asynchrone Vorgänge enthalten.

const store = neuer Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
  Mutationen:
    Inkrement(Zustand) {
      Zustand.Anzahl++
    }
  },
  Aktionen: {
    Inkrement(Kontext) {
      Kontext.commit('Inkrement')
    }
  }
})

Die Aktion wird durch die Methode store.dispatch ausgelöst:

store.dispatch('Inkrement')

Module

Durch die Verwendung eines einzelnen Zustandsbaums werden alle Anwendungszustände in einem großen Objekt zentralisiert. Wenn Ihre Anwendung sehr komplex wird, kann das Store-Objekt ziemlich aufgebläht werden.
Um die oben genannten Probleme zu lösen, ermöglicht uns Vuex, den Store in Module aufzuteilen. Jedes Modul hat seinen eigenen Status, seine eigene Mutation, Aktion, Getter und sogar verschachtelte Untermodule – von oben nach unten immer gleich aufgeteilt:

const ModulA = {
  Zustand: () => ({ ... }),
  Mutationen: { ... },
  Aktionen: { ... },
  Getter: { ... }
}
const ModulB = {
  Zustand: () => ({ ... }),
  Mutationen: { ... },
  Aktionen: { ... }
}
const store = erstelleStore({
  Module:
    a: ModulA,
    b: Modul B
  }
})

6. vuex-persistierter Zustand

Wenn Sie die Seite aktualisieren und das Projekt neu laden, wird vuex zurückgesetzt und alle Zustände werden auf den Anfangszustand zurückgesetzt. Die Verwendung von vuex-persistedstate kann diese Situation vermeiden.

1. Installation

npm install --save vuex-persistedstate

2. Verwendung

importiere Vuex von „vuex“;
importiere createPersistedState aus „vuex-persistedstate“;
const store = neuer Vuex.Store({
  Plugins: [createPersistedState()],
});

Oben finden Sie Einzelheiten dazu, wie Sie schnell mit der Vuex-Statusverwaltung in Vue3.0 beginnen können. Weitere Informationen zur Vuex-Statusverwaltung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!