Comment surveiller les valeurs de magasin à partir de vuex ?

Question

J'utilise vuex y vuejs 2 ensemble.

Je suis nouveau dans vuex Je veux regarder un store changement de variable.

Je veux ajouter le watch dans mon vue component

Voici ce que j'ai jusqu'à présent :

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

Je veux savoir s'il y a des changements dans les my_state

Comment puis-je regarder store.my_state dans mon composant Vuejs ?

Answer 1

Disons, par exemple, que vous avez un panier de fruits, et qu'à chaque fois que vous ajoutez ou retirez un fruit de la corbeille, vous voulez (1) afficher des informations sur le nombre de fruits, mais vous souhaitez également (2) être informé du décompte des fruits d'une manière ou d'une autre...

Composant de comptage de fruits.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>

Veuillez noter que le nom de la fonction dans le champ watch doit correspondre au nom de la fonction dans l'objet computed objet. Dans l'exemple ci-dessus, le nom est count .

Les nouvelles et anciennes valeurs d'une propriété surveillée seront passées en paramètres dans le callback de la surveillance (la fonction de comptage).

Le magasin de paniers pourrait ressembler à ceci :

corbeille a fruits.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

Vous pouvez en savoir plus en consultant les ressources suivantes :

• Propriétés calculées et observateurs
• Docs API : calculé
• Documentation de l'API : watch

Answer 2

Vous ne devez pas utiliser les observateurs du composant pour écouter les changements d'état. Je vous recommande d'utiliser les fonctions getters puis de les mapper dans votre composant.

import { mapGetters } from 'vuex'

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

Dans votre magasin :

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

Vous devriez être en mesure d'écouter toutes les modifications apportées à votre magasin en utilisant this.myState dans votre composant.

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

Answer 3

Comme mentionné ci-dessus, il n'est pas judicieux de regarder les changements directement en magasin.

Mais dans certains cas très rares, cela peut être utile à quelqu'un, alors je vais laisser cette réponse. Pour les autres cas, voir la réponse de @gabriel-robert

Vous pouvez le faire par state.$watch . Ajoutez ceci dans votre created (ou à l'endroit où vous souhaitez qu'elle soit exécutée) dans le composant.

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

Plus de détails : https://vuex.vuejs.org/api/#watch

Answer 4

Je pense que le demandeur veut utiliser watch avec Vuex.

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

      },
      {
        deep:true
      }
      );

Answer 5

C'est pour toutes les personnes qui ne peuvent pas résoudre leur problème avec des getters et qui ont réellement besoin d'un watcher, par exemple pour parler à des choses tierces non-vue (cf. Vue Watchers sur le moment où il faut utiliser les veilleurs).

Les observateurs et les valeurs calculées des composants Vue fonctionnent également sur les valeurs calculées. Ce n'est donc pas différent avec Vuex :

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

s'il ne s'agit que de combiner l'état local et global, la doc de mapState fournit également un exemple :

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