Dispatch Vs Commit in Vuex

Dispatch triggers an action whereas commit triggers a mutation. $dispatch is always used from your methods in routes/components. It sends a message to Vuex store to perform some action. The action can be performed any time after the current tick so that it will not affect the frontend performance.

The commit is done from within an action. It is done only when you have data to commit. Commit is synchronous and it may affect the performance of frontend.

When you want to do a task asynchronously you should use $dispatch so that your user interface will not get affected by the task by being frozen for a while or unresponsive.

If you display an ajax spinner until the action gets finished it will return a Promise as explained below.

actions: {

    loadCurrentUser(context) {

        // Return a promise so that calling method may show an AJAX spinner gif till this is done

        return new Promise((resolve, reject) => {

            // Load data from server

            // Note: you cannot commit here, the data is not available yet

            this.$http.get("/api/current-user").then(response => {

                // The data is available now. Finally we can commit something

                context.commit("saveCurrentUser", response.body)  // ref: vue-resource docs

                // Now resolve the promise


            }, response => {

                // error in loading data





    // More actions


You can define the commits as given below.

mutations: {

    saveCurrentUser(state, data) {

        Vue.set(state, "currentUser", data)


    // More commit-handlers (mutations)


When the commit is created or mounted you just call the action in your component as explained below.

mounted: function() {

    // This component just got created. Lets fetch some data here using an action

    // TODO: show ajax spinner before dispatching this action

    this.$store.dispatch("loadCurrentUser").then(response => {

        console.log("Got some data, now lets show something in this component")

        // TODO: stop the ajax spinner, loading is done at this point.

    }, error => {

        console.error("Got nothing from server. Prompt user to check internet connection and try again")