¿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 elmy_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 recibir una notificación sobre el recuento de los frutos de alguna manera elegante...
componente-conteo-de-frutas.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 recuento) como parámetros.
La tienda de cestas podría verse así:
cesta de frutas.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
Puede leer más en los siguientes recursos:
- Propiedades calculadas y observadores.
- Documentos API: calculados
- Documentos API: ver
Es tan simple como:
watch: {
'$store.state.drawer': function() {
console.log(this.$store.state.drawer)
}
}
Si la tienda está en un módulo, use:
'$store.state.myModule.drawer'
Para archivos anidados, utilice:
'$store.state.fileOne.fileTwo.myModule.drawer'
No debe utilizar observadores de componentes para escuchar el cambio de estado. Le recomiendo que utilice funciones getters y luego las asigne dentro de su componente.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
myState: 'getMyState'
})
}
}
En tu 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
Como se mencionó anteriormente, no es buena idea ver los cambios directamente en la tienda.
Pero en algunos casos muy raros puede resultar útil para alguien, así que dejaré esta respuesta. Para otros casos, consulte la respuesta de @gabriel-robert.
Puedes hacerlo a través de state.$watch. Agregue esto en su createdmétodo (o donde necesite 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 watch con Vuex.
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);
