it-swarm.com.de

vuejs 2 wie Sie die Store-Werte von vuex überwachen

Ich verwende 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 vue component hinzufügen.

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 sich my_state geändert hat.

Wie beobachte ich store.my_state in meiner vuejs-Komponente?

84
raffffffff

Nehmen wir zum Beispiel an, Sie haben einen Korb mit Früchten.... Und jedes Mal, wenn Sie eine Frucht hinzufügen oder aus dem Korb nehmen, möchten Sie. (1) Informationen über die Fruchtanzahl anzeigen, aber. Sie möchten auch (2) auf eine ausgefallene Art und Weise über die Anzahl der Früchte informiert werden ...

fruit-count-component.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, yaay!`)
    }
  }
}
</script>

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

Neue und alte Werte einer überwachten Eigenschaft werden als Parameter an den Watch-Callback (die Count-Funktion) übergeben.

Der Warenkorb 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
    }
  }
  // Obvously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

Sie können mehr in den folgenden Ressourcen lesen:

98
Anastazy

Sie sollten die Beobachter der Komponente nicht verwenden, um den Statuswechsel zu überwachen. Ich empfehle Ihnen, Getterfunktionen zu verwenden und diese dann in Ihrer Komponente abzubilden.

import { mapGetters } from 'vuex'

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

In Ihrem Laden:

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

Sie sollten in der Lage sein, Änderungen an Ihrem Geschäft mit this.myState in Ihrer Komponente zu überwachen.

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

63
Gabriel Robert

Wie oben erwähnt, ist es keine gute Idee, Änderungen direkt im Laden zu beobachten.

Aber in sehr seltenen Fällen kann es für jemanden nützlich sein, also lasse ich diese Antwort. Für andere Fälle siehe @ gabriel-robert answer

Sie können dies über state.$watch tun. Fügen Sie dies in Ihre created-Methode (oder wo Sie dies ausführen müssen) 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/de/api.html#vuex-store-instance-methods

32
GONG

Ich denke der Fragesteller möchte mit Vuex eine Uhr benutzen. 

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

      },
      {
        deep:true
      }
      );
12
yeahdixon

Dies ist für alle Menschen, die ihr Problem mit Gettern nicht lösen können und wirklich einen Beobachter brauchen, z. mit Nicht-Vue-Dritten zu sprechen (siehe Vue Watchers , wenn Sie Beobachter verwenden).

Die Beobachter und berechneten Werte von Vue Component arbeiten ebenfalls mit berechneten Werten. Bei vuex ist das also 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 um die Kombination von lokalem und globalem Status geht, enthält mapState's doc auch ein Beispiel:

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

Der beste Weg, Änderungen im Shop zu beobachten, ist die Verwendung von mapGetters, wie Gabriel sagte. Es gibt jedoch einen Fall, in dem Sie dies nicht durch mapGetters tun können, z. Sie möchten etwas aus dem Geschäft mit Parameter erhalten:

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

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

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

Aber leider todoByIdwird nur aktualisiert, wenn this.id wird geändert

Wenn Sie möchten, dass Ihre Komponenten in einem solchen Fall aktualisiert werden, verwenden Sie this.$store.watchLösung von Gong . Oder gehen Sie bewusst mit Ihrer Komponente um und aktualisieren Sie this.id wenn Sie todoById aktualisieren müssen.

4
Arseniy-II

Erstellen Sie ein Lokaler Zustand Ihrer Speichervariable, indem Sie die Wertänderungen beobachten und festlegen. _. So wird die lokale Variable für Form-Eingabe-V-Modell nicht direkt mutiert.Speichervariable.

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

Es ist so einfach wie:

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

Sie können eine Kombination aus Vuex Aktionen , Getters , berechneten Eigenschaften und Watchern verwenden, um Änderungen an einem Vuex - Zustandswert zu überwachen.

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 .

1
Amin NAIRI

Wenn Sie auf Staatsebene 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');
        }
    },
    //...
});
1
Andy

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

0
alloyking

Sie können mapState auch in Ihrer Vue-Komponente verwenden, um das Abrufen des Status aus dem Geschäft zu steuern.

In Ihrer Komponente:

computed: mapState([
  'my_state'
])

Dabei ist my_state eine Variable aus dem Geschäft.

0
Eugene Kulakov