Vuex 2.0 Dispatch versus Commit

Question

Quelqu'un peut-il expliquer quand vous utiliseriez une dépêche par rapport à un commit?

Je comprends qu'une validation déclenche une mutation et qu'une dépêche déclenche une action.

Cependant, une dépêche n'est-elle pas aussi un type d'action?

Answer 1

Comme vous l'avez dit à juste titre, $dispatch déclenche une action, et commit déclenche une mutation. Voici comment vous pouvez utiliser ces concepts:

Vous utilisez toujours $dispatch de vos méthodes dans routes / composants. $dispatch envoie un message à votre vuex magasin pour faire un peu d'action. L'action peut être effectuée à tout moment après le tick courant, de sorte que votre frontend de la performance n'est pas affectée.

Vous n'avez jamais commit à partir de vos composants / routes. Il est fait uniquement à partir d'une action, et seulement quand vous avez quelques données de commettre. Raison: la validation est synchrone et peut geler votre frontend jusqu'à ce qu'il se fait.

Nous allons examiner cette affaire: Si vous avez à aller chercher des données json à partir du serveur. Dans ce cas, vous avez besoin pour ce faire de manière asynchrone, de sorte que votre interface utilisateur n'est pas insensible / congelé pendant un certain temps. Donc, il vous suffit de $dispatch d'une action et s'attendre à faire plus tard. Votre action prend cette tâche, charge les données à partir du serveur et les mises à jour de votre état par la suite.

Si vous avez besoin de savoir quand une action est terminée, de sorte que vous pouvez afficher un ajax spinner jusque là, vous pouvez retourner une Promesse, comme expliqué ci-dessous (exemple: courant de charge de l'utilisateur):

Voici comment définir le "loadCurrentUser" action:

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
}

Dans votre mutations de gestionnaire, vous faites tous les commits originaires d'actions. Voici comment définir le "saveCurrentUser" commit:

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

Dans votre composant, lorsqu'il est created ou mounted, il vous suffit d'appeler l'action, comme indiqué ci-dessous:

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

De retour d'une Promesse, comme indiqué ci-dessus est entièrement facultative et aussi une conception de la décision de ne pas préféré par tout le monde. Pour une discussion détaillée sur la question du retour d'une Promesse ou pas, vous pouvez lire les commentaires sous cette réponse: https://stackoverflow.com/a/40167499/654825