actions
dans Vuex sont asynchrones. La seule façon de faire savoir à la fonction appelante (initiateur de l'action) qu'une action est terminée - est de renvoyer une promesse et de la résoudre plus tard.
Voici un exemple: myAction
renvoie a Promise
, effectue un appel http et résout ou rejette le Promise
dernier - le tout de manière asynchrone
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);
})
})
}
}
Maintenant, lorsque votre composant Vue démarre myAction
, il obtiendra cet objet Promise et pourra savoir s'il a réussi ou non. Voici un exemple de code pour le composant 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")
})
}
}
Comme vous pouvez le voir ci-dessus, il est très avantageux actions
de renvoyer unPromise
. Sinon, il n'y a aucun moyen pour l'initiateur de l'action de savoir ce qui se passe et quand les choses sont suffisamment stables pour afficher quelque chose sur l'interface utilisateur.
Et une dernière note concernant mutators
- comme vous l'avez souligné à juste titre, ils sont synchrones. Ils changent des éléments dans le state
, et sont généralement appelés depuis actions
. Il n'y a pas besoin de mélanger Promises
avec mutators
, comme le actions
manche cette partie.
Edit: Mes vues sur le cycle Vuex du flux de données unidirectionnel:
Si vous accédez à des données comme this.$store.state["your data key"]
dans vos composants, le flux de données est unidirectionnel.
La promesse de l'action est seulement de faire savoir au composant que l'action est terminée.
Le composant peut soit prendre des données de la fonction de résolution de promesse dans l'exemple ci-dessus (non unidirectionnel, donc non recommandé), soit directement de $store.state["your data key"]
desquelles est unidirectionnel et suit le cycle de vie des données vuex.
Le paragraphe ci-dessus suppose que votre mutateur utilise Vue.set(state, "your data key", http_data)
, une fois que l'appel http est terminé dans votre action.