Returning Promises from Vuex actions

by

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.

Edit: My views on the Vuex cycle of uni-directional data flow:

If you access data like this.$store.state["your data key"] in your components, then the data flow is uni-directional.

The promise from action is only to let the component know that action is complete.

The component may either take data from promise resolve function in the above example (not uni-directional, therefore not recommended), or directly from $store.state["your data key"] which is unidirectional and follows the vuex data lifecycle.

The above paragraph assumes your mutator uses Vue.set(state, "your data key", http_data), once the http call is completed in your action.

More Related Contents:

  1. How do I access previous promise results in a .then() chain?
  2. Can I fire and forget a promise in nodejs (ES7)?
  3. Promise.all: Order of resolved values
  4. How can I fetch an array of URLs with Promise.all?
  5. Is the Promise constructor callback executed asynchronously?
  6. Is Node.js native Promise.all processing in parallel or sequentially?
  7. What is the order of execution in JavaScript promises?
  8. How can I synchronously determine a JavaScript Promise’s state?
  9. Do I need to return after early resolve/reject?
  10. ES6 Promise.all() error handle – Is .settle() needed? [duplicate]
  11. Resolve Javascript Promise outside the Promise constructor scope
  12. Vuex state on page refresh
  13. multiple, sequential fetch() Promise
  14. How to check if an object is a Promise?
  15. Should a Promise.reject message be wrapped in Error?
  16. Why can I not throw inside a Promise.catch handler?
  17. Vuex – Do not mutate vuex store state outside mutation handlers
  18. How to watch store values from vuex?
  19. Accessing Vuex state when defining Vue-Router routes
  20. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  21. Nuxt.js vuex store not persisted
  22. What is the best general practice to timeout a function in promise [closed]
  23. Why does the Promise object block rendering?
  24. Promise and Promise.all(array) executed before array fulfilled [duplicate]
  25. Creating a (ES6) promise without starting to resolve it
  26. fromPromise does not exist on type Observable
  27. ES6 Promise replacement of async.eachLimit / async.mapLimit
  28. When should I use Vuex?
  29. What are the implications of the recursive joining of Promises in terms of Monads?
  30. When is the body of a Promise constructor callback executed?

Leave a Comment