javascript - usar - vuejs 2 como ver los valores de la tienda desde vuex

vuex español

Question

Estoy usando vuex y vuejs 2 juntos.

Soy nuevo en vuex , quiero ver un cambio en la 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?

Answer 1

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 .

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

Answer 2

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

Answer 3

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

Answer 4

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, yaay!`)
    }
  }
}
</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 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
    }
  }
  // Obvously 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

Answer 5

Es tan simple como:

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

Answer 6

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 sean vue (vea Vue Watchers sobre cuándo usar observadores).

Los observadores del componente Vue y los valores calculados 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
        }
    }
})

Answer 7

La mejor manera de ver los cambios en la tienda es usar mapGetters como dijo Gabriel. Pero hay un caso en el que no puede hacerlo a través de mapGetters por ejemplo, si desea obtener algo de la tienda usando el parámetro:

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

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

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

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

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

Answer 8

No debe usar los observadores de componentes para escuchar el cambio de estado. Le recomiendo que use las 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.myState en su componente.

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

Answer 9

Puede usar una combinación de actions de Vuex, captadores, propiedades calculadas y observadores para escuchar los cambios en un valor de estado de 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 .

Answer 10

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

Answer 11

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

En su componente:

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

..

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

Donde my_state es una variable de la tienda.

Answer 12

si usas mecanografiado puedes:

computed: mapState([
  ''my_state''
])

Answer 13

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

Puede hacerlo a través del state.$watch . Agregue esto en su método created (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/en/api.html#vuex-store-instance-methods