Vuex 2.0 Dispatch versus Commit

Como bien has dicho, $dispatch desencadena una acción, y commit desencadena una mutación. Así es como puedes usar estos conceptos:

Siempre usa $dispatch desde sus métodos en rutas / componentes. $dispatch envía un mensaje a tu tienda vuex para hacer alguna acción. La acción se puede realizar en cualquier momento después del tick actual, para que el rendimiento de su frontend no se vea afectado.

Nunca commit desde ninguno de sus componentes / rutas. Se hace solo desde dentro de un acción, y solo cuando tenga algunos datos para confirmar. Razón: commit es síncrono y puede congelar su frontend hasta que se haga.

Consideremos este caso: Si tiene que obtener algunos datos json del servidor. En este caso, debe hacer esto de forma asíncrona para que su interfaz de usuario no deje de responder / se congele durante un tiempo. Por lo tanto, simplemente $dispatch una acción y esperar que se haga más tarde. Su acción toma esta tarea, carga datos del servidor y actualiza su state later.

Si necesita saber cuándo ha finalizado una acción, para que pueda mostrar un hilandero ajax hasta entonces, puede devolver una Promesa como se explica a continuación (ejemplo: cargar usuario actual):

Así es como se define la acción "loadCurrentUser":

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
}

En tu manejador de mutaciones, haces todas las confirmaciones que se originan en acciones. Así es como se define el commit" saveCurrentUser":

mutations: {
    saveCurrentUser(state, data) {
        Vue.set(state, "currentUser", data)
    },
    // More commit-handlers (mutations)
}

En su componente, cuando es created o mounted, simplemente llame al acción como se muestra a continuación:

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")
    })
}

Devolver una Promesa como se muestra arriba es totalmente opcional y también una decisión de diseño no preferida por todos. Para una discusión detallada sobre si devolver una Promesa o no, puede leer los comentarios bajo esta respuesta: https://stackoverflow.com/a/40167499/654825