vue.js 2 wie man Speicherwerte von vuex überwacht

Ich benutze vuexund vuejs 2zusammen.

Ich bin neu in vuex, ich möchte eine storeVariablenänderung beobachten.

Ich möchte die watchFunktion 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_stateschaue ich in meiner vuejs-Komponente?

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

<template>
  <!-- We meet our first objective (1) by simply -->
  <!-- binding to the count property. -->
  <p>Fruits: {{ count }}</p>
</template>

<script>
import basket from '../resources/fruit-basket'

export default () {
  computed: {
    count () {
      return basket.state.fruits.length
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count (newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yay!`)
    }
  }
}
</script>

Bitte beachten Sie, dass der Name der Funktion im watchObjekt mit dem Namen der Funktion im computedObjekt übereinstimmen muss . Im obigen Beispiel lautet der Name count.

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

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

Vue.use(Vuex)

const basket = new Vuex.Store({
  state: {
    fruits: []
  },
  getters: {
    fruitsCount (state) {
      return state.fruits.length
    }
  }
  // Obviously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

Weitere Informationen finden Sie in den folgenden Ressourcen:

• Berechnete Eigenschaften und Beobachter
• API-Dokumente: berechnet
• API-Dokumente: beobachten

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.

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

In Ihrem Geschäft:

const getters = {
  getMyState: state => state.my_state
}

Sie sollten in der Lage sein, Änderungen an Ihrem Geschäft zu hören, indem Sie sie this.myStatein Ihrer Komponente verwenden.

https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper

Es ist so einfach wie:

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

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 Ihre created(oder wo Sie dies ausführen müssen) Methode in der Komponente ein

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.
    }
);

Weitere Details: https://vuex.vuejs.org/api/#watch

Ich denke, der Fragesteller möchte die Uhr mit Vuex verwenden.

this.$store.watch(
      (state)=>{
        return this.$store.getters.your_getter
      },
      (val)=>{
       //something changed do something

      },
      {
        deep:true
      }
      );

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:

import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState(['somestate']),
        someComputedLocalState() {
            // is triggered whenever the store state changes
            return this.somestate + ' works too';
        }
    },
    watch: {
        somestate(val, oldVal) {
            // is triggered whenever the store state changes
            console.log('do stuff', val, oldVal);
        }
    }
}

Wenn es nur darum geht, den lokalen und den globalen Status zu kombinieren, bietet das mapState-Dokument auch ein Beispiel:

computed: {
    ...mapState({
        // to access local state with `this`, a normal function must be used
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
    }
})

Wenn Sie Typoskript verwenden, können Sie:

import { Watch } from "vue-property-decorator";

..

@Watch("$store.state.something")
private watchSomething() {
   // use this.$store.state.something for access
   ...
}

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 .

data() {
  return {
    localState: null
  };
 },
 computed: {
  ...mapGetters({
    computedGlobalStateVariable: 'state/globalStateVariable'
  })
 },
 watch: {
  computedGlobalStateVariable: 'setLocalState'
 },
 methods: {
  setLocalState(value) {
   this.localState = Object.assign({}, value);
  }
 }

Der beste Weg, um Änderungen im Geschäft zu beobachten, ist die Verwendung, mapGetterswie Gabriel sagte. Es gibt jedoch einen Fall, in dem Sie dies nicht tun können, mapGettersz. B. wenn Sie mithilfe des Parameters etwas aus dem Speicher holen möchten:

getters: {
  getTodoById: (state, getters) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

In diesem Fall können Sie nicht verwenden mapGetters. Sie können stattdessen versuchen, Folgendes zu tun:

computed: {
    todoById() {
        return this.$store.getters.getTodoById(this.id)
    }
}

Wird aber leider todoById nur aktualisiert, wenn this.idgeändert wird

Wenn 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 aktualisieren this.idSie sie, wenn Sie sie aktualisieren müssen todoById.

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:

export const state = () => ({
 isClosed: false
})
export const mutations = {
 closeWindow(state, payload) {
  state.isClosed = payload
 }
}

In diesem Szenario erstelle ich eine booleanStatuseigenschaft, die ich an verschiedenen Stellen in der Anwendung ändern möchte:

this.$store.commit('closeWindow', true)

Wenn ich nun diese Statuseigenschaft in einer anderen Komponente beobachten und dann die lokale Eigenschaft ändern muss, würde ich Folgendes in den mountedHook schreiben :

mounted() {
 this.$store.watch(
  state => state.isClosed,
  (value) => {
   if (value) { this.localProperty = 'edit' }
  }
 )
}

Zuerst setze ich einen Watcher für die Eigenschaft state und dann verwende ich in der Rückruffunktion die Eigenschaft this, um die valuezu ändern localProperty.

Ich hoffe, es hilft!

Wenn Sie auf Bundesstaatsebene schauen möchten, können Sie dies folgendermaßen tun:

let App = new Vue({
    //...
    store,
    watch: {
        '$store.state.myState': function (newVal) {
            console.log(newVal);
            store.dispatch('handleMyStateChange');
        }
    },
    //...
});

Sie können eine Kombination aus Vuex- Aktionen , Gettern , berechneten Eigenschaften und Beobachtern verwenden , um Änderungen an einem Vuex-Statuswert abzuhören.

HTML Quelltext:

<div id="app" :style='style'>
  <input v-model='computedColor' type="text" placeholder='Background Color'>
</div>

JavaScript-Code:

'use strict'

Vue.use(Vuex)

const { mapGetters, mapActions, Store } = Vuex

new Vue({
    el: '#app',
  store: new Store({
    state: {
      color: 'red'
    },
    getters: {
      color({color}) {
        return color
      }
    },
    mutations: {
      setColor(state, payload) {
        state.color = payload
      }
    },
    actions: {
      setColor({commit}, payload) {
        commit('setColor', payload)
      }
    }
  }),
  methods: {
    ...mapGetters([
        'color'
    ]),
    ...mapActions([
        'setColor'
    ])
  },
  computed: {
    computedColor: {
        set(value) {
        this.setColor(value)
      },
      get() {
        return this.color()
      }
    },
    style() {
        return `background-color: ${this.computedColor};`
    }
  },
  watch: {
    computedColor() {
        console.log(`Watcher in use @${new Date().getTime()}`)
    }
  }
})

Siehe JSFiddle-Demo .

Sie können auch die Store-Mutationen abonnieren:

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

https://vuex.vuejs.org/api/#subscribe

Erstellen Sie innerhalb der Komponente eine berechnete Funktion

computed:{
  myState:function(){
    return this.$store.state.my_state; // return the state value in `my_state`
  }
}

Jetzt kann der berechnete Funktionsname wie z

watch:{
  myState:function(newVal,oldVal){
    // this function will trigger when ever the value of `my_state` changes
  }
}

Die im vuexStatus vorgenommenen Änderungen my_statespiegeln sich in der berechneten Funktion wider myStateund lösen die Überwachungsfunktion aus.

Wenn der Status my_stateverschachtelte Daten hat, handlerhilft die Option mehr

watch:{
  myState:{
    handler:function(newVal,oldVal){
      // this function will trigger when ever the value of `my_state` changes
    },
    deep:true
  }
}

Dadurch werden alle verschachtelten Werte im Speicher überwacht my_state.

Sie können mapState auch in Ihrer vue-Komponente verwenden, um den Status aus dem Geschäft abzurufen.

In Ihrer Komponente:

computed: mapState([
  'my_state'
])

Wo my_stateist eine Variable aus dem Laden.

Ich habe diesen Weg benutzt und es funktioniert:

store.js:

const state = {
  createSuccess: false
};

Mutationen.js

[mutations.CREATE_SUCCESS](state, payload) {
    state.createSuccess = payload;
}

action.js

async [mutations.STORE]({ commit }, payload) {
  try {
    let result = await axios.post('/api/admin/users', payload);
    commit(mutations.CREATE_SUCCESS, user);
  } catch (err) {
    console.log(err);
  }
}

getters.js

isSuccess: state => {
    return state.createSuccess
}

Und in Ihrer Komponente, in der Sie den Status aus dem Geschäft verwenden:

watch: {
    isSuccess(value) {
      if (value) {
        this.$notify({
          title: "Success",
          message: "Create user success",
          type: "success"
        });
      }
    }
  }

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