source

Vuex: 디스패치된 액션을 액션 내에 올바르게 추가하는 방법

goodcode 2022. 8. 31. 22:39
반응형

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);
}

동작에 액세스 할 수 없기 때문에 동작하지 않습니다.showBanner적절히.첫 번째 예에서는context.commit()접근하다mutation에 액세스 하려면 ,action동일한 규칙을 따라야 합니다.

통과하지 않고dispatch단순히 명령어를 호출하는 것만으로action그것 때문에context:

context.dispatch('showBanner', data);

또는 에서 사용하는 것이 더 좋습니다.context물건.전화하지 않아도 됩니다.context몇 번이고 반복:

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

언급URL : https://stackoverflow.com/questions/63369904/vuex-how-to-properly-add-an-dispatched-action-inside-an-action

반응형