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
               
resolve()
            },
response => {
                //
error in loading data
                reject()
            })
        })
    },
    // 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")
    })

}