Ich benutze vuex
und vuejs 2
zusammen.
Ich bin neu in "Vuex", ich möchte eine "Store"-Variable ändern zu beobachten.
Ich möchte die Funktion "watch" in meiner "Vue-Komponente" hinzufügen.
Das ist was ich bis jetzt habe:
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 irgendwelche Änderungen im my_state
gibt
Wie beobachte ich store.my_state
in meiner Vuejs Komponente?
Sie sollten nicht component's watchers verwenden, um auf Zustandsänderungen zu hören. Ich empfehle Ihnen, Getter-Funktionen zu verwenden und diese dann innerhalb Ihrer Komponente zuzuordnen.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
myState: 'getMyState'
})
}
}
In deinem Shop:
const getters = {
getMyState: state => state.my_state
}
Sie sollten in der Lage sein, alle Änderungen, die an Ihrem Shop vorgenommen werden, zu verfolgen, indem Sie this.myState
in Ihrer Komponente verwenden.
https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
Wie bereits erwähnt, ist es keine gute Idee, Änderungen direkt im Geschäft zu beobachten
Aber in einigen sehr seltenen Fällen kann es für jemanden nützlich sein, daher lasse ich diese Antwort stehen. Für andere Fälle lesen Sie bitte die Antwort von @gabriel-robert.
Sie können dies über state.$watch
tun. Fügen Sie dies in Ihre created
(oder wo Sie es brauchen, um ausgeführt zu werden) Methode in der Komponente
this.$store.watch(
function (state) {
return state.my_state;
},
function () {
//do something on data change
},
{
deep: true //add this if u need to watch object properties change etc.
}
);
Mehr Details: https://vuex.vuejs.org/api/#watch
Sie können auch mapState in Ihrer Vue-Komponente verwenden, um den Zustand direkt aus dem Speicher zu erhalten.
In Ihrer Komponente:
computed: mapState([
'my_state'
])
Dabei ist "my_state" eine Variable aus dem Speicher.