So überwachen Sie Datenänderungen in Vuex in Vue

Wie Vue Datenänderungen in Vuex überwacht: Sie können die Daten in Vuex zunächst über das berechnete Attribut abrufen. Anschließend können Sie mithilfe von watch Änderungen im Wert des berechneten Attributs überwachen, die Werte vor und nach der Datenänderung abrufen entsprechend verarbeiten.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

1. Überwachen Sie die Datenänderungen von Vuex in der Vue-Datei.

Erhalten Sie zuerst die Daten in Vuex über berechnete Eigenschaften.
Verwenden Sie dann Watch, um die Werte in den berechneten Eigenschaften zu überwachen, um die Änderungen zu erhalten

2. Wie funktioniert Vue? Überwachen Sie Änderungen in Vuex-Daten in Nicht-Vue-Dateien?

Normalerweise überwachen wir Datenänderungen in Vue-Dateien, insbesondere Datenänderungen in Vuex. Es ist sehr praktisch, die Werte vor und nach der Datenänderung abzurufen und entsprechend zu behandeln.

Allerdings ist es nicht einfach, Datenänderungen in Dateien wie js zu überwachen. Glücklicherweise bietet die offizielle Vue-Website Lösungen

watch(fn: Function, callback: Function, options?: Object): Die Instanzmethode of Function

vuex empfängt zwei Parameter:

Der erste Parameter ist fn, lauscht reaktionsschnell auf den Rückgabewert von fn und ruft die Rückruffunktion auf, wenn sich der Wert ändert. fn empfängt den Status des Speichers als ersten Parameter und seinen Getter als zweiten Parameter.
Der zweite Parameter ist eine optionale Objektparameterdarstellung, ähnlich der Rückruffunktion von Vues Uhr, die die alten und neuen Werte darstellt.
Wenn wir nicht zuhören möchten, können wir eine Variable definieren, um die Rückgabewertfunktion dieser Methode zu empfangen, und diese Funktion aufrufen, um die Überwachung zu stoppen.

Vorteile: Wir können einen bestimmten Wert überwachen, den wir benötigen, und die alten und neuen Werte ganz bequem wie in einer Vue-Datei abrufen.

Nachteile: Wenn wir die Änderungen vieler Werte kennen müssen, müssen wir viel schreiben Überwachungsmethoden (Sie können erwägen, sie in eine Methode oder Klasse zu kapseln)

Verwendungsbeispiel:

<script>
import { mapGetters } from &#39;vuex&#39;
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(["mapboxMap"]),
    mapboxMap1() {
      // return this.$store.state.mapbox.map;
      return this.mapboxMap;
    }
  },
  watch: {
    mapboxMap1(newData, oldData) {
     
    }
  },
}
</script>

Führen Sie den Store in die entsprechende js-Datei ein
Rufen Sie die Überwachungsinstanzmethode des Stores auf, und der erste Funktionsparameter wird zurückgegeben ein Wert im Zustand, der überwacht werden muss (Wenn ich beispielsweise die Änderung von pathName in vuex überwachen möchte, gebe ich diesen Wert zurück)
Der zweite Parameter ist derselbe wie die Überwachung von vue und empfängt 2 Parameter, die darstellen Die alten und neuen Werte
Empfangen Sie den Rückgabewert der Uhr über die Variable watchFun. Durch Aufrufen dieser Methode wird die Überwachung gestoppt
Oben wird beschrieben, wie Sie Änderungen in Vuex-Daten in Nicht-Vue-Dateien überwachen, z js.

Wie im Artikel erwähnt, ist es unfreundlich, mehrere Monitore zu schreiben, wenn die Datenmenge zu groß ist. Sie können erwägen, Mutationen zu abonnieren, um große Datenmengen zu verwalten.

Verwandte Empfehlungen: „

vue.js Tutorial

“

Das obige ist der detaillierte Inhalt vonSo überwachen Sie Datenänderungen in Vuex in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!