在Vuex商店中实现常见任务的最佳方式是什么
我目前正在尝试实现一个从Vuex store action对象中进行API调用的常见任务，我的action当前看起来如下所示：
/**
* check an account activation token
*
*/
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
Api.checkActivationToken(payload.token).then((response) => {
if (response.fails()) {
return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
}
return commit('SET_TOKEN')
})
}
我有几个这样的方法来执行各种操作。我希望能够做的是在每次进行API调用时显示一个加载器，并在收到响应后再次隐藏它。我可以这样实现：
/**
* check an account activation token
*
*/
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
commit('SHOW_LOADER')
Api.checkActivationToken(payload.token).then((response) => {
commit('HIDE_LOADER')
if (response.fails()) {
return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
}
return commit('SET_TOKEN')
})
}
但我需要在每个API调用中重复这些SHOW_LOADER/HIDE_LOADER提交。
我想要做的是将这个功能集中在某个地方，这样每当进行API调用时，加载器的显示和隐藏都会隐式地绑定到调用上，而不必每次都包含这些额外的行。
为了清楚起见，实例化的API是一个位于Axios之上的客户端层，这样我就可以在触发调用之前对其进行准备。我发现我不能直接将存储导入客户端层或Axios事件触发的位置(这样我就可以将加载程序的可见性集中在那里)，因为我在vuex模块中实例化客户端层，因此当我尝试这样做时会创建一个循环引用，这意味着该存储被返回为未定义的。
我试图通过一些我还没有遇到的钩子或事件来做的事情是可能的吗？
回答 1
Stack Overflow用户
发布于 2017-05-27 14:58:17
在阅读了this GitHub的帖子和Evan You的回复后，我实际上对这个“问题”采取了不同的方式，他在那里谈到了解耦。
最终，我决定通过强制API层直接了解存储，我将这两件事紧密地结合在一起。因此，我现在处理我在进行存储提交的每个组件中寻找的显示和隐藏功能，如下所示：
/**
* check the validity of the reset token
*
*/
checkToken () {
if (!this.token) {
return this.$store.commit('NEW_MESSAGE', {message: 'No activation token found. Unable to continue'})
}
this.showLoader()
this.$store.dispatch('CHECK_ACTIVATION_TOKEN', {token: this.token}).then(this.hideLoader)
},
在这里，我定义了在Master vue组件中简化Vuex提交的方法，我的每个组件都将扩展该组件。然后，我在需要时调用showLoader，并使用promise来确定流程何时完成，并在那里调用hideLoader。
这意味着我已经从存储和API层中删除了表示逻辑，并将它们保留在逻辑上属于它们的位置。
如果有人对此有更好的想法，我洗耳恭听。
@wostex -感谢您的回复！
https://stackoverflow.com/questions/44211032
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号