Ich benutze vuex
und vuejs 2
zusammen.
Ich bin neu in vuex
, ich möchte eine store
Variablenänderung beobachten.
Ich möchte die watch
Funktion in meinem hinzufügenvue component
Das habe ich bisher:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
Ich möchte wissen, ob es Änderungen in der gibt my_state
Wie store.my_state
schaue ich in meiner vuejs-Komponente?
javascript
vue.js
vuejs2
vuex
raffffffff
quelle
quelle
Antworten:
Angenommen, Sie haben einen Obstkorb, und jedes Mal, wenn Sie eine Frucht zum Korb hinzufügen oder daraus entfernen, möchten Sie (1) Informationen zur Anzahl der Früchte anzeigen, aber auch (2) benachrichtigt werden die Zählung der Früchte auf ausgefallene Weise ...
Fruchtzählung-Komponente.vue
Bitte beachten Sie, dass der Name der Funktion im
watch
Objekt mit dem Namen der Funktion imcomputed
Objekt übereinstimmen muss . Im obigen Beispiel lautet der Namecount
.Neue und alte Werte einer überwachten Eigenschaft werden als Parameter an den Überwachungsrückruf (die Zählfunktion) übergeben.
Der Korbladen könnte so aussehen:
Obstkorb.js
Weitere Informationen finden Sie in den folgenden Ressourcen:
quelle
watch
Aktion in zwei Schritte aufgeteilt werden soll: 1) Überprüfen Sie zunächst, ob die gewünschten Daten zwischengespeichert sind und ob nur die zwischengespeicherten Daten zurückgegeben werden. 2) Wenn der Cache fehlgeschlagen ist, benötige ich eine asynchrone Ajax-Aktion, um die Daten abzurufen, aber dies scheint dieaction
Arbeit von zu sein. Ich hoffe, meine Frage macht Sinn, danke!Sie sollten die Beobachter der Komponente nicht verwenden, um Statusänderungen abzuhören. Ich empfehle Ihnen, Getter-Funktionen zu verwenden und diese dann in Ihrer Komponente zuzuordnen.
In Ihrem Geschäft:
Sie sollten in der Lage sein, Änderungen an Ihrem Geschäft zu hören, indem Sie sie
this.myState
in Ihrer Komponente verwenden.https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
quelle
Es ist so einfach wie:
quelle
function(n) { console.log(n); }
Wie oben erwähnt, ist es nicht ratsam, Änderungen direkt im Geschäft zu beobachten
Aber in einigen sehr seltenen Fällen kann es für jemanden nützlich sein, also werde ich diese Antwort hinterlassen. Für andere Fälle siehe @ gabriel-robert Antwort
Sie können dies durch tun
state.$watch
. Fügen Sie dies in Ihrecreated
(oder wo Sie dies ausführen müssen) Methode in der Komponente einWeitere Details: https://vuex.vuejs.org/api/#watch
quelle
Ich denke, der Fragesteller möchte die Uhr mit Vuex verwenden.
quelle
Dies ist für alle Leute gedacht, die ihr Problem mit Gettern nicht lösen können und tatsächlich einen Beobachter benötigen, z. B. um mit Dingen von Drittanbietern zu sprechen (siehe Vue Watchers, wann Beobachter verwendet werden sollen).
Die Beobachter und berechneten Werte der Vue-Komponente funktionieren auch mit berechneten Werten. Bei vuex ist das nicht anders:
Wenn es nur darum geht, den lokalen und den globalen Status zu kombinieren, bietet das mapState-Dokument auch ein Beispiel:
quelle
Wenn Sie Typoskript verwenden, können Sie:
quelle
Erstellen Sie einen lokalen Status Ihrer Geschäftsvariablen, indem Sie Wertänderungen beobachten und festlegen. Wenn sich die lokale Variable für das V-Modell mit Formulareingabe ändert, wird die Speichervariable nicht direkt mutiert .
quelle
Der beste Weg, um Änderungen im Geschäft zu beobachten, ist die Verwendung,
mapGetters
wie Gabriel sagte. Es gibt jedoch einen Fall, in dem Sie dies nicht tun können,mapGetters
z. B. wenn Sie mithilfe des Parameters etwas aus dem Speicher holen möchten:In diesem Fall können Sie nicht verwenden
mapGetters
. Sie können stattdessen versuchen, Folgendes zu tun:Wird aber leider
todoById
nur aktualisiert, wennthis.id
geändert wirdWenn Sie in diesem Fall eine Komponentenaktualisierung wünschen, verwenden Sie
this.$store.watch
die von Gong bereitgestellte Lösung . Oder gehen Sie bewusst mit Ihrer Komponente um und aktualisierenthis.id
Sie sie, wenn Sie sie aktualisieren müssentodoById
.quelle
Wenn Sie einfach zu wollen , sehen ein staatliches Eigentum und dann innerhalb der Komponente handeln entsprechend den Änderungen dieser Eigenschaft sehen dann das folgende Beispiel.
In
store.js
:In diesem Szenario erstelle ich eine
boolean
Statuseigenschaft, die ich an verschiedenen Stellen in der Anwendung ändern möchte:Wenn ich nun diese Statuseigenschaft in einer anderen Komponente beobachten und dann die lokale Eigenschaft ändern muss, würde ich Folgendes in den
mounted
Hook schreiben :Zuerst setze ich einen Watcher für die Eigenschaft state und dann verwende ich in der Rückruffunktion die Eigenschaft this, um die
value
zu ändernlocalProperty
.Ich hoffe, es hilft!
quelle
Wenn Sie auf Bundesstaatsebene schauen möchten, können Sie dies folgendermaßen tun:
quelle
store.state
Änderungen durchdispatch
Statusaktionen von Komponenten zu behandeln, da dieses Verhalten nur funktioniert, wenn Sie diese Komponente verwenden. Sie könnten auch mit einer Endlosschleife enden. Achten Sie darauf, dassstore.state
Änderungen nur selten verwendet werden, z. B. wenn Sie eine Komponente oder eine Seite haben, die eine aufstore.state
Änderungen basierende Aktion ausführen sollte, die mit dem berechneten mapState nur dann nicht verarbeitet werden kann, wenn Sie nicht mitnewValue
vs vergleichen könnenoldValue
store.dispatch
? Wenn Siestore.state
Änderungen fürstore' why not handle it inside
store.mutations vornehmen möchten?store.dispatch
zuerst. Zum Beispiel möchte ich bei jeder$store.state.country
Änderung alle Städte aus einem Land abrufen , also füge ich dies dem Beobachter hinzu. Dann würde ich einen Ajax-Anruf schreiben: instore.dispatch('fetchCities')
schreibe ich:axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )
Sie können eine Kombination aus Vuex- Aktionen , Gettern , berechneten Eigenschaften und Beobachtern verwenden , um Änderungen an einem Vuex-Statuswert abzuhören.
HTML Quelltext:
JavaScript-Code:
Siehe JSFiddle-Demo .
quelle
Sie können auch die Store-Mutationen abonnieren:
https://vuex.vuejs.org/api/#subscribe
quelle
Erstellen Sie innerhalb der Komponente eine berechnete Funktion
Jetzt kann der berechnete Funktionsname wie z
Die im
vuex
Status vorgenommenen Änderungenmy_state
spiegeln sich in der berechneten Funktion widermyState
und lösen die Überwachungsfunktion aus.Wenn der Status
my_state
verschachtelte Daten hat,handler
hilft die Option mehrDadurch werden alle verschachtelten Werte im Speicher überwacht
my_state
.quelle
Sie können mapState auch in Ihrer vue-Komponente verwenden, um den Status aus dem Geschäft abzurufen.
In Ihrer Komponente:
Wo
my_state
ist eine Variable aus dem Laden.quelle
quelle
Ich habe diesen Weg benutzt und es funktioniert:
store.js:
Mutationen.js
action.js
getters.js
Und in Ihrer Komponente, in der Sie den Status aus dem Geschäft verwenden:
Wenn der Benutzer ein Formular sendet , wird die Aktion STORE aufgerufen. Nach dem erfolgreichen Erstellen wird anschließend die Mutation CREATE_SUCCESS festgeschrieben. Turn createSuccess ist true, und in der Komponente sieht der Watcher, dass sich der Wert geändert hat, und löst eine Benachrichtigung aus.
isSuccess sollte mit dem Namen übereinstimmen, den Sie in getters.js deklarieren
quelle