actions
no Vuex são assíncronos. A única maneira de permitir que a função de chamada (iniciador da ação) saiba que uma ação está concluída - é retornando uma promessa e resolvendo-a mais tarde.
Aqui está um exemplo: myAction
retorna a Promise
, faz uma chamada http e resolve ou rejeita a Promise
última - tudo de forma assíncrona
actions: {
myAction(context, data) {
return new Promise((resolve, reject) => {
// Do something here... lets say, a http call using vue-resource
this.$http("/api/something").then(response => {
// http success, call the mutator and change something in state
resolve(response); // Let the calling function know that http is done. You may send some data back
}, error => {
// http failed, let the calling function know that action did not work out
reject(error);
})
})
}
}
Agora, quando o componente Vue for iniciado myAction
, ele obterá esse objeto Promise e poderá saber se foi bem-sucedido ou não. Aqui está um código de amostra para o componente Vue:
export default {
mounted: function() {
// This component just got created. Lets fetch some data here using an action
this.$store.dispatch("myAction").then(response => {
console.log("Got some data, now lets show something in this component")
}, error => {
console.error("Got nothing from server. Prompt user to check internet connection and try again")
})
}
}
Como você pode ver acima, é altamente benéfico actions
retornar a Promise
. Caso contrário, não há como o iniciador de ações saber o que está acontecendo e quando as coisas estão estáveis o suficiente para mostrar algo na interface do usuário.
E uma última observação sobre mutators
- como você corretamente apontou, eles são síncronos. Eles mudam as coisas no state
e geralmente são chamados de actions
. Não há necessidade de misturar Promises
com mutators
, como a actions
alça que parte.
Edit: Minhas visões sobre o ciclo Vuex de fluxo de dados unidirecional:
Se você acessar dados como this.$store.state["your data key"]
em seus componentes, o fluxo de dados será unidirecional.
A promessa da ação é apenas informar ao componente que a ação está completa.
O componente pode obter dados da função de resolução de promessa no exemplo acima (não unidirecional, portanto, não recomendado) ou diretamente do $store.state["your data key"]
qual é unidirecional e segue o ciclo de vida dos dados vuex.
O parágrafo acima assume que o seu mutador usa Vue.set(state, "your data key", http_data)
, assim que a chamada http for concluída em sua ação.