时间戳

首页 > 解决方案 > Vuex：如何在动作中正确添加调度的动作

vuejs2 - 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', true);
        context.commit('setBannerMessage', ['Something Went Wrong.  Please try again']);
        context.commit('setBannerStatus', 'Error');
        setTimeout(() => {
            context.commit('setShowBanner', false);
            context.commit('setBannerMessage', null);
            context.commit('setBannerStatus', null);
        }, 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);
}

标签： vuejs2vuex

解决方案

它不起作用，因为您没有showBanner正确访问该操作。在您的第一个示例中，您曾经context.commit()访问过mutation. 因此，为了访问action您需要遵循相同的规则：

而不是传递dispatch参数，您只需要调用action它context：

context.dispatch('showBanner', data);

甚至更好地使用argument destructuring在context对象上。它使您免于context一遍又一遍地调用：

saveDisplayLimitQuantity({ dispatch }, data) {
   ... 
   dispatch('showBanner', data);
}

推荐阅读