vue.js 2 come guardare i valori dei negozi da vuex

Sto usando vuexe vuejs 2insieme.

Sono nuovo vuex, voglio vedere un storecambiamento variabile.

Voglio aggiungere la watchfunzione nel miovue component

Questo è quello che ho finora:

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

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

Voglio sapere se ci sono cambiamenti nel my_state

Come posso guardare store.my_statenel mio componente Vuejs?

Diciamo, ad esempio, che hai un cesto di frutta e ogni volta che aggiungi o rimuovi un frutto dal cesto, vuoi (1) visualizzare le informazioni sul conteggio della frutta, ma anche (2) vuoi essere avvisato di il conteggio dei frutti in qualche modo elegante ...

frutta-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>

Si noti che il nome della funzione watchnell'oggetto deve corrispondere al nome della funzione computednell'oggetto. Nell'esempio sopra il nome è count.

I valori vecchi e nuovi di una proprietà controllata verranno passati alla richiamata di controllo (la funzione di conteggio) come parametri.

Il negozio di cestini potrebbe apparire così:

frutta basket.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

Puoi leggere di più nelle seguenti risorse:

• Proprietà e osservatori calcolati
• Documenti API: calcolati
• Documenti API: guarda

Non utilizzare gli watcher del componente per ascoltare il cambiamento di stato. Ti consiglio di usare le funzioni di getter e di mapparle all'interno del tuo componente.

import { mapGetters } from 'vuex'

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

Nel tuo negozio:

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

Dovresti essere in grado di ascoltare tutte le modifiche apportate al tuo negozio utilizzando this.myState nel tuo componente.

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

È semplice come:

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

Come accennato in precedenza, non è una buona idea guardare i cambiamenti direttamente in negozio

Ma in alcuni casi molto rari può essere utile per qualcuno, quindi lascerò questa risposta. Per altri casi, vedere la risposta di @ gabriel-robert

Puoi farlo attraverso state.$watch. Aggiungi questo nel tuo createdmetodo (o dove hai bisogno che questo sia eseguito) nel componente

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

Maggiori dettagli: https://vuex.vuejs.org/api/#watch

Penso che il richiedente voglia usare watch con Vuex.

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

      },
      {
        deep:true
      }
      );

Questo è per tutte le persone che non riescono a risolvere il loro problema con i getter e che in realtà hanno davvero bisogno di un osservatore, ad esempio per parlare con cose di terze parti non vue (vedi Vue Watchers su quando usare gli osservatori).

I watcher e i valori calcolati del componente Vue funzionano entrambi anche su valori calcolati. Quindi non è diverso con 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);
        }
    }
}

se si tratta solo di combinare lo stato locale e globale, il documento di mapState fornisce anche un esempio:

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

se usi il dattiloscritto puoi:

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

..

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

Crea uno stato locale della variabile del tuo negozio osservando e impostando le variazioni di valore. In modo tale che la variabile locale cambi per il modello v di input del modulo non muta direttamente la variabile di archivio .

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

Il modo migliore per guardare i cambiamenti del negozio è usare mapGetterscome ha detto Gabriel. Ma c'è un caso in cui non puoi farlo attraverso, mapGettersad esempio, vuoi ottenere qualcosa dallo store usando il parametro:

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

in quel caso non puoi usare mapGetters. Invece potresti provare a fare qualcosa del genere:

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

Ma purtroppo todoById verrà aggiornato solo se this.idviene modificato

Se si desidera aggiornare il componente in tal caso, utilizzare la this.$store.watch soluzione fornita da Gong . Oppure gestisci il componente in modo consapevole e aggiorna this.idquando è necessario eseguire l'aggiornamento todoById.

Se vuoi semplicemente guardare una proprietà dello stato e quindi agire all'interno del componente in base alle modifiche di tale proprietà, vedere l'esempio seguente.

In store.js:

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

In questo scenario, sto creando una booleanproprietà dello stato che ho intenzione di modificare in diversi punti dell'applicazione in questo modo:

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

Ora, se ho bisogno di guardare quella proprietà dello stato in qualche altro componente e quindi cambiare la proprietà locale, scriverei il seguente mountedgancio:

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

In primo luogo, sto impostando un watcher sulla proprietà state e poi nella funzione di callback uso la valueproprietà of per modificare il localProperty.

Spero possa essere d'aiuto!

Quando vuoi guardare a livello statale, puoi farlo in questo modo:

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

È possibile utilizzare una combinazione di azioni Vuex , getter , proprietà calcolate e watcher per ascoltare le modifiche su un valore di stato Vuex.

Codice HTML:

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

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

Guarda la demo di JSFiddle .

Puoi anche iscriverti alle mutazioni del negozio:

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

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

All'interno del componente, creare una funzione calcolata

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

Ora è possibile guardare il nome della funzione calcolata, ad esempio

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

Le modifiche apportate allo vuexstato my_statesi rifletteranno nella funzione calcolatamyState e attiveranno la funzione orologio.

Se lo stato my_stateha dati nidificati, l' handleropzione aiuterà di più

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

Questo controllerà tutti i valori nidificati nel negozio my_state.

Puoi anche usare mapState nel tuo componente vue per dirigere ottenere lo stato dal negozio.

Nel tuo componente:

computed: mapState([
  'my_state'
])

Dove si my_statetrova una variabile dal negozio.

Ho usato in questo modo e funziona:

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
}

E nel tuo componente in cui usi lo stato dal negozio:

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

Quando l'utente invia il modulo, l'azione STORE verrà chiamata, dopo aver creato con successo, la mutazione CREATE_SUCCESS viene commessa successivamente. Ruota createSuccess è vero e, nel componente, l'osservatore vedrà il valore è cambiato e attiverà la notifica.

isSuccess deve corrispondere al nome dichiarato in getters.js