（Vue.js + VueX）在 Action 内提交承诺未运行答案

【问题标题】：(Vue.js + VUEX) Commit inside Action promise not running（Vue.js + VueX）在 Action 内提交承诺未运行
【发布时间】：2017-06-28 07:42:07
【问题描述】：

我有一个返回承诺的动作（所以我可以在我的组件上拥有一个加载状态）

由于某种原因，没有触发提交，在提交行之后没有运行任何内容，也没有错误

这是我的行动：

add({ commit }, data ) {
    return new Promise((resolve, reject) => {       
        axios.post('/spaces',data).then(
            response => {   
                commit('ADD_SPACE',response.data);  
                //this line only runs if put before the commit.
                resolve(response.data);
            },
            error => {                  
                reject(error);          
            }); 
    });
}

突变：

    ADD_SPACE (state, space) {
        state.spaces.push(space);         
    }

【问题讨论】：

我认为您的操作没有任何问题，您能否展示一下 ADD_SPACE 突变以及您如何在组件中调度操作
如果你console.log(response.data)在成功回调中，你得到了什么？
@VamsiKrishna 我没问题地得到了这个对象。如果我将解析放在提交之前，我的视图会获得“响应”并更新它（停止显示加载状态），但 ADD_SPACE 似乎永远无法正常运行
这看起来很奇怪！
如果没有看到更多代码，很难说出哪里出了问题。可能是常量export const ADD_SPACE = 'ADD_SPACE'; 的错字或提交方法解包未按预期工作（检查console.log(commit) 以查看它是否是提交方法 - 或者您可以删除解包 {} 并使用 context.commit 访问它）或者如果您正在使用 vuex 存储模块，这可能是命名空间问题。只是一些想法......

标签： vue.js vuex

【解决方案1】：

将操作更改为 async 并具有 await，而不是自己创建“新 Promise”，从而解决了问题。现在实际执行了提交（即使在第一个版本上没有发出错误 + 如果我将提交的名称更改为无效的名称，则会发出错误）

 async add({ commit }, space ) {
    return await axios.post('/spaces',space).then(
        response => {   
            commit('ADD_SPACE',response.data);    
            Promise.resolve(response.data);                
        },
        error => {                  
            Promise.reject(error);          
        });         
},

如果有人对此有解释，因为我不完全理解原因。

【讨论】：