javascript - mapactions - Vuex 2.0 Despacho contra Commit

vuex actions type

Question

¿Puede alguien explicar cuándo utilizarías un envío frente a un compromiso?

Entiendo que una confirmación activa la mutación y un envío activa una acción.

Sin embargo, ¿no es un despacho también un tipo de acción?

Answer 1

Como bien ha dicho, $dispatch desencadena una acción, y la commit desencadena una mutación. Aquí es cómo puedes usar estos conceptos:

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

Nunca te commit desde ninguno de tus componentes / rutas. Se realiza solo dentro de una acción, y solo cuando tiene algunos datos para confirmar. Motivo: la confirmación es sincrónica y puede congelar tu interfaz hasta que se haga.

Consideremos este caso: si tiene que recuperar algunos datos json del servidor. En este caso, debe hacer esto de forma asincrónica para que su interfaz de usuario no deje de responder o se quede inmóvil por un tiempo. Entonces, simplemente $dispatch una acción y esperas que se haga más tarde. Su acción toma esta tarea, carga los datos del servidor y actualiza su estado más adelante.

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

Aquí es cómo 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 controlador de mutaciones, haces todas las confirmaciones que se originan de las acciones. Aquí es cómo se define el commit "saveCurrentUser":

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

En su componente, cuando se created o mounted , simplemente llame la 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 completamente 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 en esta respuesta: https://.com/a/40167499/654825