我有一个叫做activateProgram我调度的 Vuex 动作。我希望在那里设置的状态设置loadingData为 true，然后在 api 请求完成时将其设置为 false。我想将此状态用作我视图中微调器的标志。这可能吗？
actions: {
activateProgram: (context, data) => {
/// SET A ANOTHER STATE RIGHT HERE TO MARK THAT A REQUEST STARTED
return axios.post(data.url, data.request)
.then((response) =>
/// SET THAT STATE TO FALSE WHEN THE API REQUEST IS FINISHED
context.commit('toggleProgram', true)
)
.catch((error) =>
context.commit('toggleProgram', false)
);
}
}
以下是一个相当常见的模式，借自这篇文章：
const actions = {
fetchApiData (store) {
// sets `state.loading` to true. Show a spinner or something.
store.commit('API_DATA_PENDING')
return axios.get('someExternalService')
.then(response => {
// sets `state.loading` to false
// also sets `state.apiData to response`
store.commit('API_DATA_SUCCESS', response.data)
})
.catch(error => {
// set `state.loading` to false and do something with error
store.commit('API_DATA_FAILURE', error)
})
}
}
loading为您的州添加一面旗帜。它可能是有意义的组loading和toggleProgram突变在一起。“挂起”突变可以切换loading到true，而“成功”和“失败”提交将设置loading为false并根据需要改变程序状态。
为每个 ajax 帖子都这样做可能会让人厌烦，所以下一步可能是添加一个抽象。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句