vuex 加载延迟问题

Question

现有代码如下。需要store.state.auth.user有信息才next();，如果没有则执行store.dispatch("getUserInfo");为store.state.auth.user获取值。
现在的问题时当store.state.auth.user没有值时去触发getUserInfo，
怎么等getUserInfo完成user有值后再next呢？

        if(!store.state.auth.user){
            store.dispatch("getUserInfo");
            console.log(store.state.auth.user);
            next();
        }
        

以上时我的代码

然后我看了官方的组合action代码如下

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

改下我的代码如下：

actions.js:

export const getUserInfo = (store) => {
    Api.getUserInfo().then((response) => {
        console.log(response);
        if(response.data.code===200){
            return new Promise((resolve, reject) => {
                store.commit(types.USERINFO_SUCCESS, { user: response.data.object.user });
                resolve()
            });
        }else {
            return store.commit(types.USERINFO_FAILURE)
        }
    }, (response) => {
        store.commit(types.USERINFO_FAILURE)
    })
}

main.js:

if(!store.state.auth.user){
            store.dispatch("getUserInfo").then(() => {
                console.log(store.state.auth.user);
                next();
            });
        }

但打印出来的store.state.auth.user一样的undefined.证明getUserInfo还没执行完就执行了以下的方法。是不是我哪里写错了？

Answer 1

建议楼主把自己的情况跟代码示例理清楚一下。

我大概总结一下，不知道是不是这种情况：
在异步请求还没结束的时候，mounted钩子里的判断就已经走了，导致某些判断出错。
有一个方法，相信也有人这么干过。

// actions
export const getUserInfo = function() {
    // 一些异步操作，我就写伪代码了
    fetch(url)
        .then(rs => {
            dispatch('SOME_MUTATION');
            // `mounted`钩子里可以在`promise`的`resolve`里做判断
            return Promise.resolve();
        }, rs => {
            dispatch('SOME_OTHER_MUTATION');
            return Promise.reject();
        });
}

Update 1.
楼主的代码居然变成了Vue.js 2，我就还是写Vue.js 1了。将就看。

// vue
mounted() {
    getUserInfo()
        .then(rs => {
            // 在这里做判断
            this.$nextTick(() => {
                console.log(someState);
            });
        });
}

Update 2.

我这里是main.js里面router方法不是组件的mounted，而且我要的是vuex的dispach完成后的回调，不是http

楼主的语气听起来很厉害，开源分享社区，第一次见提个问题这么硬的。既然你想要的，你就想办法拿吧，我就不说了。