Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

vuex 加载延迟问题

现有代码如下。需要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还没执行完就执行了以下的方法。是不是我哪里写错了?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

我大概总结一下,不知道是不是这种情况:
在异步请求还没结束的时候,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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...