vuejs 2 como observar os valores da loja vuex

Question

raffffffff

Mais

Fonte Versão sem AMP Editar

vuejs 2 como observar os valores da loja vuex

Eu estou utilizando vuex e vuejs 2 juntos.

Sou novo no vuex, quero assistir a uma mudança de variável da store.

Eu quero adicionar a função "relógio" no meu "componente de valor".

Isto é o que eu tenho até agora:

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

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

Eu quero saber se há alguma mudança no my_state.

Como eu assisto store.my_state no meu componente vuejs?

Xquick

Pergunta editada :em

Programação

javascript vue.js vuejs2 vuex

7º abril 2017 в 5:13

Ainda sem vistas

Gabriel Robert · Answer 1 · 2017-04-08T12:49:24+00:00

Você não deve usar os observadores de componentes's para ouvir a mudança de estado. Eu recomendo que você use as funções getters e depois mapeie-as dentro do seu componente.

import { mapGetters } from 'vuex'

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

Na sua loja:

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

Você deve ser capaz de ouvir quaisquer alterações feitas em sua loja utilizando estos.myState em seu componente.

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

GONG · Answer 2 · 2017-04-07T05:31:09+00:00

**Como mencionado acima, não é boa ideia ver mudanças directamente na loja***.

Mas em alguns casos muito raros pode ser útil para alguém, por isso vou deixar esta resposta. Para outros casos, por favor veja @gabriel-robert answer

Você pode fazer isso através do state.$watch. Adicione isto no seu método criado (ou onde você precisa que isto seja executado) no 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.
    }
);

Mais detalhes: https://vuex.vuejs.org/api/#watch