actions
en Vuex son asíncronos. La única forma de permitir que la función de llamada (iniciador de la acción) sepa que una acción está completa es devolviendo una Promesa y resolviéndola más tarde.
Aquí hay un ejemplo: myAction
devuelve un Promise
, realiza una llamada http y resuelve o rechaza el Promise
posterior, todo de forma así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);
})
})
}
}
Ahora, cuando se inicia su componente Vue myAction
, obtendrá este objeto Promise y podrá saber si tuvo éxito o no. Aquí hay un código de muestra para el 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 puede ver arriba, es altamente beneficioso actions
devolver a Promise
. De lo contrario, el iniciador de acciones no puede saber qué está sucediendo y cuándo las cosas son lo suficientemente estables como para mostrar algo en la interfaz de usuario.
Y una última nota con respecto a mutators
- como acertadamente señaló, son sincrónicos. Cambian cosas en el state
, y generalmente se les llama desde actions
. No hay necesidad de mezclar Promises
con mutators
, como el actions
mango esa parte.
Editar: Mis puntos de vista sobre el ciclo Vuex del flujo de datos unidireccional:
Si accede a datos como this.$store.state["your data key"]
en sus componentes, entonces el flujo de datos es unidireccional.
La promesa de la acción es solo hacer que el componente sepa que la acción está completa.
El componente puede tomar datos de la función de resolución de promesa en el ejemplo anterior (no unidireccional, por lo tanto no se recomienda), o directamente desde el $store.state["your data key"]
cual es unidireccional y sigue el ciclo de vida de los datos vuex.
El párrafo anterior supone que su mutador utiliza Vue.set(state, "your data key", http_data)
, una vez que se complete la llamada http en su acción.