Estoy usando vuex y vuejs 2 juntos.
Soy nuevo en vuex , quiero ver un cambio de variable de la store .
Quiero agregar la función de watch en mi vue 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 my_state
¿Cómo veo store.my_state en mi componente vuejs?
Supongamos, por ejemplo, que tiene una canasta de frutas y cada vez que agrega o elimina una fruta de la canasta, desea (1) mostrar información sobre el conteo de frutas, pero también (2) desea recibir una notificación de la cuenta 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 objeto de watch debe coincidir con el nombre de la función en el objeto computed . En el ejemplo anterior, el nombre es count .
Los valores nuevos y antiguos de una propiedad observada se pasarán a la devolución de llamada de observación (la función de conteo) como parámetros.
La tienda de canastas 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 basketPuede leer más en los siguientes recursos:
Es tan simple como:
watch: { '$store.state.drawer': function() { console.log(this.$store.state.drawer) } }No debe usar los observadores del componente para escuchar el cambio de estado. Le recomiendo que use funciones de 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 usando this.myState en su componente.
https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper