Vuex 2.0 Отправка по сравнению с Commit

Ответ 1

Как вы правильно сказали, $dispatch запускает действие, а commit запускает мутацию. Вот как вы можете использовать эти понятия:

Вы всегда используете $dispatch своих методов в маршрутах/компонентах. $dispatch отправляет сообщение в ваш магазин vuex для выполнения некоторых действий. Действие может быть выполнено в любое время после текущего тика, так что производительность вашего интерфейса не будет затронута.

Вы никогда не commit какие-либо из ваших компонентов/маршрутов. Это делается только из действия, и только когда у вас есть данные для фиксации. Причина: commit является синхронным и может заморозить ваш интерфейс до его завершения.

Рассмотрим этот случай: если вам нужно получить некоторые данные json с сервера. В этом случае вам необходимо сделать это асинхронно, чтобы ваш пользовательский интерфейс не был ненадежным/замороженным на некоторое время. Итак, вы просто $dispatch действие и ожидаете, что это будет сделано позже. Ваше действие выполняет эту задачу, загружает данные с сервера и обновляет ваше состояние позже.

Если вам нужно знать, когда действие закончено, чтобы вы могли показывать счетчик ajax до тех пор, вы можете вернуть Promise, как описано ниже (пример: загрузить текущего пользователя):

Вот как вы определяете действие "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
}

В вашем обработчике мутаций вы совершаете все коммиты, происходящие из действий. Вот как вы определяете фиксацию "saveCurrentUser":

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

В вашем компоненте, когда он created или mounted, вы просто вызываете действие, как показано ниже:

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

Возвращение обещания, как показано выше, полностью необязательно, а также дизайнерское решение, которое не рекомендуется всем. Подробное обсуждение вопроса о том, следует ли возвращать обещание или нет, вы можете прочитать комментарии по этому ответу: fooobar.com/info/265365/...