vue.js 2 cómo ver los valores de la tienda desde vuex

Estoy usando vuexy vuejs 2juntos.

Soy nuevo en vuex, quiero ver un storecambio variable.

Quiero agregar la watchfunción en mivue component

Esto es lo que tengo hasta ahora:

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

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

Quiero saber si hay algún cambio en el my_state

¿Cómo miro store.my_stateen mi componente vuejs?

Digamos, por ejemplo, que tiene una canasta de frutas, y cada vez que agrega o quita una fruta de la canasta, desea (1) mostrar información sobre el recuento de frutas, pero también (2) desea que se le notifique el recuento de las frutas de una manera elegante ...

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>

Tenga en cuenta que el nombre de la función en el watchobjeto debe coincidir con el nombre de la función en el computedobjeto. En el ejemplo anterior, el nombre es count.

Los valores nuevos y antiguos de una propiedad vigilada se pasarán a la devolución de llamada de vigilancia (la función de conteo) como parámetros.

La tienda de cestas podría verse así:

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

Puedes leer más en los siguientes recursos:

• Propiedades computadas y observadores
• Documentos API: calculados
• Documentos API: reloj

No debe usar los observadores de componentes para escuchar el cambio de estado. Le recomiendo que use funciones getters y luego las asigne dentro de su componente.

import { mapGetters } from 'vuex'

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

En su tienda:

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

Debería poder escuchar cualquier cambio realizado en su tienda utilizando this.myStatesu componente.

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

Es tan simple como:

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

Como se mencionó anteriormente, no es una buena idea ver los cambios directamente en la tienda

Pero en algunos casos muy raros puede ser útil para alguien, por lo que dejaré esta respuesta. Para otros casos, consulte la respuesta de @ gabriel-robert

Puedes hacer esto a través de state.$watch. Agregue esto en su createdmétodo (o donde necesita que se ejecute) en el 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.
    }
);

Más detalles: https://vuex.vuejs.org/api/#watch

Creo que el autor de la pregunta quiere usar el reloj con Vuex.

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

      },
      {
        deep:true
      }
      );

Esto es para todas las personas que no pueden resolver su problema con los captadores y que realmente necesitan un observador, por ejemplo, para hablar con cosas de terceros que no son vue (ver Vue Watchers sobre cuándo usar observadores).

Los observadores y los valores calculados del componente Vue también funcionan en valores calculados. Entonces no es diferente 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);
        }
    }
}

Si solo se trata de combinar el estado local y global, el documento de mapState también proporciona un ejemplo:

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

si usas mecanografiado puedes:

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

..

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

Cree un estado local de su variable de tienda observando y estableciendo cambios de valor. Tal que la variable local cambie para el modelo v de entrada de formulario no muta directamente la variable de tienda .

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

La mejor manera de ver los cambios en la tienda es usar mapGetterscomo dijo Gabriel. Pero hay un caso en el que no puede hacerlo, por mapGettersejemplo, si desea obtener algo de la tienda usando el parámetro:

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

en ese caso no puedes usar mapGetters. Puedes intentar hacer algo como esto en su lugar:

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

Pero desafortunadamente todoById se actualizará solo si this.idse cambia

Si desea la actualización de sus componentes en tal caso, utilice la this.$store.watch solución provista por Gong . O maneje su componente conscientemente y actualice this.idcuando necesite actualizar todoById.

Si simplemente quiere ver una propiedad del estado y luego actuar dentro del componente de acuerdo con los cambios de esa propiedad, consulte el siguiente ejemplo.

En store.js:

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

En este escenario, estoy creando una booleanpropiedad de estado que voy a cambiar en diferentes lugares de la aplicación de la siguiente manera:

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

Ahora, si necesito ver esa propiedad estatal en algún otro componente y luego cambiar la propiedad local, escribiría lo siguiente en el mountedenlace:

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

En primer lugar, estoy configurando un observador en la propiedad del estado y luego, en la función de devolución de llamada, uso la valuede esa propiedad para cambiarlocalProperty .

¡Espero que ayude!

Cuando desee ver a nivel estatal, puede hacerlo de esta manera:

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

Se puede utilizar una combinación de Vuex acciones , captadores , propiedades calculadas y los observadores para escuchar a los cambios en un valor de estado Vuex.

Código HTML:

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

Código 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()}`)
    }
  }
})

Ver demostración de JSFiddle .

También puede suscribirse a las mutaciones de la tienda:

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

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

Dentro del componente, cree una función calculada

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

Ahora se puede ver el nombre de la función calculada, como

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

Los cambios realizados en el vuexestado my_statese reflejarán en la función calculada myStatey activarán la función de reloj.

Si el estado my_statetiene datos anidados, entonces la handleropción ayudará más

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

Esto observará todos los valores anidados en la tienda my_state.

También puede usar mapState en su componente vue para dirigir el estado de la tienda.

En su componente:

computed: mapState([
  'my_state'
])

Donde my_statees una variable de la tienda.

Utilicé de esta manera y funciona:

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
}

Y en su componente donde usa el estado de la tienda:

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

Cuando el usuario envíe el formulario, se llamará a la acción STORE , después de crearse correctamente , la mutación CREATE_SUCCESS se confirma después de eso. Gire createSuccess es verdadero, y en el componente, el observador verá que el valor ha cambiado y activará la notificación.

isSuccess debe coincidir con el nombre que declaras en getters.js