为什么 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})
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'
我现在遇到了一个奇怪的问题。我的 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})
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'