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?
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
**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
Você também pode usar o mapState no seu componente de valor para obter diretamente o estado da loja.
No seu componente:
computed: mapState([
'my_state'
])
Onde my_state
é uma variável da loja.