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