programing

약속의 이유내 vuex 스토어에서는 모든 것이 작동하지 않는다.

coolbiz 2022. 7. 2. 14:06
반응형

약속의 이유내 vuex 스토어에서는 모든 것이 작동하지 않는다.

난 지금 이상한 문제에 직면해 있어.나의 vue 프로젝트에는 다른 모듈로 분리된 vuex 스토어가 있습니다.사용하고 싶다Promise.all()두 개의 독립된 비동기 vuex 액션을 동시에 실행하여 첫 번째 장애 동작의 이점을 누릴 수 있습니다.

스토어/스토어/카테고리:

    async CATEGORIES({ rootState }) {
        const response = await axios.post('link_to_api', {
            // some arguments for the api
            arg: rootState.args
        })

        return response
    }

스토어/매장/정보:

    async TRANSPORTATION({ rootState }) {
         const response = await axios.post('link_to_api', {
            // some arguments for the api
            arg: rootState.args
        })

        return response
    }

이러한 비동기 함수를 호출하고 싶은 것을 알고 있습니다.Promise.all:

스토어/스토어/카테고리:

    async PUT_CATEGORIES({ commit, dispatch, rootState }) {
      try {
         const [resCategories, resTransportation] = await Promise.all([
            dispatch('CATEGORIES').catch(err => { console.log('Fehler bei Kabinenabfrage!'); throw {error: err, origin: 'kabine'}; }),
            dispatch('transportation/TRANSPORTATION', {root:true}).catch(err => { console.log('Fehler bei Flugabfrage!'); throw {error: err, origin: 'flug'}; })
        ]) 
         //do something after both promises resolved

      } catch(error) {
            // do something if one promise rejected
            commit('errorlog/ERROR', 4, {root:true})
            dispatch("errorlog/LOG_ERROR", {'origin': '2', 'error_code': '113', 'message': error.toString()}, {root:true})
            router.push({path: '/Error'})
        }  

다음의 에러가 표시됩니다.

에러 메시지

이거 이상한데, 왜냐하면 나는{root:true}프리픽스 트랜스포트를 디스패치하여 저장 중인 트랜스포트 모듈의 액션에 액세스합니다.이것은 catch 블록에서 사용하는errorlog 모듈의 LOG_ERROR 액션에 매우 적합합니다.

범주 모듈에서 Transportation 액션을 복사하면 정상적으로 작동합니다.

이 문제에 직면한 적이 있고 조언이 있는 사람이 있습니까?

잘 부탁드립니다!

당신의 경우,{root:true}두 번째 인수로 전달되지만 세 번째 인수로 전달되어야 합니다.

- dispatch('transportation/TRANSPORTATION', {root:true})
+ dispatch('transportation/TRANSPORTATION', null, {root:true})

vuex의 문서에 따르면

글로벌 네임스페이스에서 작업을 디스패치하거나 돌연변이를 커밋하려면 디스패치 및 커밋할 세 번째 인수로 {root: true}을(를) 전달하십시오.

또한 샘플 코드도 제공합니다(여기서 더 간략하게 설명).

modules: {
  foo: {
    namespaced: true,
    actions: {
      // dispatch and commit are also localized for this module
      // they will accept `root` option for the root dispatch/commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

언급URL : https://stackoverflow.com/questions/60147057/why-does-promises-all-doesnt-work-in-my-vuex-store

반응형