vue.js 2 comment regarder les valeurs de magasin depuis vuex

J'utilise vuexet vuejs 2ensemble.

Je suis nouveau vuex, je veux voir un storechangement variable.

Je veux ajouter la watchfonction dans monvue 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 le my_state

Comment regarder store.my_statedans mon composant vuejs?

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

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, yay!`)
    }
  }
}
</script>

Veuillez noter que le nom de la fonction dans l' watchobjet doit correspondre au nom de la fonction dans l' computedobjet. Dans l'exemple ci-dessus, le nom est count.

Les nouvelles et anciennes valeurs d'une propriété surveillée seront transmises au rappel de surveillance (la fonction de comptage) en tant que paramètres.

Le magasin de paniers pourrait ressembler à ceci:

corbeille de 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 dans les ressources suivantes:

• Propriétés calculées et observateurs
• Documents de l'API: calculés
• Documentation sur l'API: regarder

Vous ne devez pas utiliser les observateurs de composant pour écouter le changement d'état. Je vous recommande d'utiliser les fonctions getters, puis de les mapper à l'intérieur de votre composant.

import { mapGetters } from 'vuex'

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

Dans votre magasin:

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

Vous devriez pouvoir écouter les modifications apportées à votre boutique en utilisant this.myStatedans votre composant.

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

C'est aussi simple que:

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

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

Mais dans de très rares cas, cela peut être utile pour quelqu'un, je vais donc laisser cette réponse. Pour d'autres cas, veuillez consulter la réponse @ gabriel-robert

Vous pouvez le faire à travers state.$watch. Ajoutez ceci dans votre createdméthode (ou là où vous en avez besoin) 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

Je pense que le demandeur veut utiliser la montre avec Vuex.

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

      },
      {
        deep:true
      }
      );

C'est pour toutes les personnes qui ne peuvent pas résoudre leur problème avec les getters et qui ont réellement besoin d'un observateur, par exemple pour parler à des tiers non-vue (voir Vue Watchers sur quand utiliser les observateurs).

Les observateurs et les valeurs calculées du composant 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 documentation 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
        }
    }
})

si vous utilisez dactylographié, vous pouvez:

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

..

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

Créez un état local de votre variable de magasin en surveillant et en définissant les changements de valeur. De telle sorte que la variable locale change pour le v-model d'entrée de formulaire ne mute pas directement la variable de stockage .

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

La meilleure façon d'observer les changements de magasin est d'utiliser mapGetterscomme l'a dit Gabriel. Mais il y a un cas où vous ne pouvez pas le faire, par mapGettersexemple, vous voulez obtenir quelque chose du magasin en utilisant le paramètre:

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

dans ce cas, vous ne pouvez pas utiliser mapGetters. Vous pouvez essayer de faire quelque chose comme ceci à la place:

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

Mais malheureusement, todoById ne sera mis à jour que si this.idest modifié

Si vous souhaitez mettre à jour vos composants dans ce cas, utilisez la this.$store.watch solution fournie par Gong . Ou gérez votre composant consciemment et mettez this.idà jour lorsque vous avez besoin de mettre à jour todoById.

Si vous souhaitez simplement observer une propriété d'état et agir ensuite dans le composant en fonction des modifications de cette propriété, consultez l'exemple ci-dessous.

Dans store.js:

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

Dans ce scénario, je crée une booleanpropriété d'état que je vais changer à différents endroits de l'application comme ceci:

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

Maintenant, si je dois surveiller cette propriété d'état dans un autre composant, puis modifier la propriété locale, j'écrirais ce qui suit dans le mountedcrochet:

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

Tout d'abord, je configure un observateur sur la propriété state, puis dans la fonction de rappel, j'utilise le valuede cette propriété pour modifier le localProperty.

J'espère que ça aide!

Lorsque vous souhaitez regarder au niveau de l'état, cela peut être fait de cette façon:

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

Vous pouvez utiliser une combinaison d' actions Vuex , de getters , de propriétés calculées et d' observateurs pour écouter les changements sur une valeur d'état Vuex.

Code HTML:

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

Code JavaScript:

'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()}`)
    }
  }
})

Voir la démo de JSFiddle .

Vous pouvez également vous abonner aux mutations du magasin:

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

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

À l'intérieur du composant, créez une fonction calculée

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

Maintenant, le nom de la fonction calculée peut être regardé, comme

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

Les modifications apportées à l' vuexétat my_stateseront reflétées dans la fonction calculée myStateet déclenchent la fonction de surveillance.

Si l'état a my_statedes données imbriquées, l' handleroption aidera plus

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

Cela surveillera toutes les valeurs imbriquées dans le magasin my_state.

Vous pouvez également utiliser mapState dans votre composant vue pour obtenir directement l'état du magasin.

Dans votre composant:

computed: mapState([
  'my_state'
])

Où my_stateest une variable du magasin.

J'ai utilisé de cette façon et cela fonctionne:

store.js:

const state = {
  createSuccess: false
};

mutations.js

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

actions.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
}

Et dans votre composant où vous utilisez l'état du magasin:

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

Lorsque l'utilisateur soumet le formulaire, l'action STORE sera appelée, après le succès de la création, la mutation CREATE_SUCCESS est validée après cela. Tournez createSuccess est vrai, et dans le composant, l'observateur verra que la valeur a changé et déclenchera une notification.

isSuccess doit correspondre au nom que vous déclarez dans getters.js