How to return Promises from Vuex actions?

Question

This one I feel is good by design, but don't know if it contradicts the Vuex cycle of uni-directional data flow.

Basically, is it considered good practice to return a promise(-like) object from an action? I treat these as async wrappers, with states of failure and the like, so seems like a good fit to return a promise. Contrarily mutators just change things, and are the pure structures within a store/module.

Prasad Patil · Accepted Answer

actions in Vuex are asynchronous. The only way to let the calling function (initiator of action) to know that an action is complete - is by returning a Promise and resolving it later. Here is an example: myAction returns a Promise, makes a http call and resolves or rejects the Promise later - all asynchronously 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); }) }) } } Now, when your Vue component initiates myAction, it will get this Promise object and can know whether it succeeded or not. Here is some sample code for the Vue component: 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") }) } } As you can see above, it is highly beneficial for actions to return a Promise. Otherwise there is no way for the action initiator to know what is happening and when things are stable enough to show something on the user interface. And a last note regarding mutators - as you rightly pointed out, they are synchronous. They change stuff in the state, and are usually called from actions. There is no need to mix Promises with mutators, as the actions handle that part.

Vue JS

Similar Questions

Vuejs and Vue.set(), how to update array?

How to update parent data from child component in vuejs?

Getting Error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand. Vue.JS 2.0

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram