반응형
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
반응형
'source' 카테고리의 다른 글
| C 디폴트 인수 (0) | 2022.08.31 |
|---|---|
| 프로젝트 후반부에서 Vue.js를 스탠드아론 빌드에서 런타임 전용 빌드로 변경하시겠습니까? (0) | 2022.08.31 |
| Vue 2에서 FCM 푸시 알림 수신 서비스 워커를 등록하는 방법 (0) | 2022.08.31 |
| C의 연산자 유형 (0) | 2022.08.31 |
| 마운트된 vue 구성 요소에서 모멘트 js가 작동하지 않는 이유는 무엇입니까? (0) | 2022.08.31 |