Может ли кто-нибудь объяснить, когда вы будете использовать отправку или коммит?
Я понимаю, что муфта совершает триггеры, и отправка инициирует действие.
Однако, не является ли отправкой также тип действия?
Может ли кто-нибудь объяснить, когда вы будете использовать отправку или коммит?
Я понимаю, что муфта совершает триггеры, и отправка инициирует действие.
Однако, не является ли отправкой также тип действия?
Как вы правильно сказали, $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/...