为什么 Promises.all 在我的 vuex 商店中不起作用

Why does Promises.all doesn't work in my vuex store

我现在遇到了一个奇怪的问题。我的 vue 项目中有一个 vuex 商店,它在不同的模块中分开。我想使用 Promise.all() 一次执行两个独立的异步 vuex 操作,以享受 first fail behavior.

的优势

store/modules/categories:

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

        return response
    }

store/modules/transportation:

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

        return response
    }

我知道要在 Promise.all:

中调用那些异步函数

store/modules/categories:

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

我收到以下错误:

这很奇怪,因为我在 dispatch 中使用 {root:true} 和前缀 transport 来访问 store 中传输模块的操作。这非常适合我在 catch 块中使用的 errorlog 模块中的 LOG_ERROR 操作。

如果我在类别模块中复制 TRANSPORTATION 操作,效果很好...

有没有人以前遇到过这个问题并有什么建议??

提前致谢!

在您的例子中,{root:true} 作为第二个参数传递,尽管它应该作为第三个参数传递。

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

根据vuex's doc

To dispatch actions or commit mutations in the global namespace, pass { root: true } as the 3rd argument to dispatch and commit.

他们还提供了示例代码(此处进一步简化)

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'