如何解决Vuex:如何在动作中正确添加调度的动作
在按照下面的saveDisplayLimitQuanity
之类的调度动作发布帖子后,我进行了变异以显示横幅,然后在5秒钟后将其隐藏。
我必须将此逻辑添加到每个分派的操作中,这样会重复很多代码。
saveDisplayLimitQuantity: (context,data) => {
return axios.post(data.url,{
display_limit: data.display_limit
})
.then(response => {
context.commit('setShowBanner',true);
context.commit('setBannerMessage',['Display Limit Quantity Successully Updated!']);
context.commit('setBannerStatus','Success');
setTimeout(() => {
context.commit('setShowBanner',false);
context.commit('setBannerMessage',null);
context.commit('setBannerStatus',null);
},5000)
})
.catch(err => {
context.commit('setShowBanner',['Something Went Wrong. Please try again']);
context.commit('setBannerStatus','Error');
setTimeout(() => {
context.commit('setShowBanner',5000)
})
},
我想执行一个动作,将其放入返回的Promise中,每次可以调用该消息,并仅传递一条消息。我尝试通过添加dispatch
作为参数来做到这一点,但仍然无法正常工作:
saveDisplayLimitQuantity: (context,data,dispatch) => {
return axios.post(data.url,{
display_limit: data.display_limit
})
.then(response => {
let data = {
'status': 'Success','message': "Yay!"
}
dispatch('showBanner',data)
})
.catch(err => {
let data = {
'status': 'Error','message': "Please try again"
}
dispatch('showBanner',data)
})
},showBanner: (context,data) => {
context.commit('showBanner',true);
context.commit('bannerMessage',data.message);
context.commit('bannerStatus',data.status);
}
解决方法
它不起作用,因为您没有正确访问操作showBanner
。在第一个示例中,您使用context.commit()
访问mutation
。因此,要访问action
,您需要遵循相同的规则:
您无需传递dispatch
参数,而只需通过action
来调用context
:
context.dispatch('showBanner',data);
或者甚至更好地在context
对象上使用argument destructuring
。这样可以避免您一次又一次呼叫context
:
saveDisplayLimitQuantity({ dispatch },data) {
...
dispatch('showBanner',data);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。