web-dev-qa-db-fra.com

Vuex 2.0 Dispatch versus Commit

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?

javascriptvue.jsvuex
38
imchingy

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

Vous utilisez toujours $dispatch à partir de vos méthodes en routes/composants. $dispatch envoie un message à votre magasin vuex pour qu’il agisse. L'action peut être effectuée à tout moment après le tick actuel , afin que vos performances frontales ne soient pas affectées.

Vous n'avez jamais commit d'aucun de vos composants/routes. C’est fait seulement à partir d’une action, et seulement quand vous avez certaines données à commettre. Raison: commit est synchrone et peut geler votre interface jusqu'à ce qu'elle soit terminée.

Considérons ce cas: Si vous devez extraire des données JSON du serveur. Dans ce cas, vous devez procéder de manière asynchrone afin que votre interface utilisateur ne reste pas bloquée/figée pendant un certain temps. Donc, vous simplement $dispatch une action et attendez-vous à ce qu'elle soit faite plus tard. Votre action prend en charge cette tâche, charge les données du serveur et met à jour votre état ultérieurement.

Si vous avez besoin de savoir quand une action est terminée pour pouvoir afficher un ajax ajax jusque-là, vous pouvez retourner une promesse comme expliqué ci-dessous (exemple: charger l'utilisateur actuel):

Voici comment vous définissez l'action "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
}

Dans votre gestionnaire de mutations, vous effectuez tous les commits provenant d'actions. Voici comment vous définissez le commit "saveCurrentUser":

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

Dans votre composant, lorsqu'il s'agit de created ou mounted, vous appelez simplement 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")
    })
}

Retourner une promesse comme indiqué ci-dessus est entièrement facultatif et constitue également une décision de conception que tout le monde ne préfère pas. Pour une discussion détaillée sur le retour d’une promesse ou non, vous pouvez lire les commentaires sous cette réponse: https://stackoverflow.com/a/40167499/654825

94
Mani