Question

我正在尝试实现以下逻辑：调用登录，然后如果响应正常，则调用用于检索用户数据的方法。

登录操作

loginUser({commit,dispatch}, credentials) {
            const form = new URLSearchParams();
            form.append("login", credentials.login);
            form.append("password", credentials.password);

            const formConfig = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            };

         return  Axios.post(loginUrl, form, formConfig).then(
                (response) => {
                    commit('setErrorMessage', '', {root: true});
                    commit('setAuthenticated', response.headers[authorization]);
                    dispatch('getUserByLoginAuth',credentials.login);
                },
                (error) => {
                    if (error.response.status===500){
                        commit('setErrorMessage', error.response.data.message, {root: true});
                    } else {
                        commit('setErrorMessage', error.response.data, {root: true});
                    }

                });

        },

从上一个动作中发出的第二个动作：

getUserByLoginAuth({commit, getters}, login) {
            return getters.authenticatedAxios.get(userUrl + '/find', {
                params: {
                    login: login
                }
            }).then(
                (response) => {
                    commit('setErrorMessage', '', {root: true});
                    commit('setUser', response.data);
                },
                (error) => {
                    commit('setErrorMessage', error.response.data, {root: true});
                });
        },

此操作仅从第二次调用（据我了解，它与promise相关）。

这是组件中的代码，用于分派登录操作

this.$store.dispatch('loginUser', this.credentials).then(() => {
                    this.errorMessage = this.getError;
                    if (this.errorMessage.length) {
                        this.errorOccurred = true;

                    }
                    this.$router.push({path: '/user/' + this.getId});
                });
                this.errorOccurred = false;
            },

在这里，我也不确定我是否在正确的位置进行路由。据我了解，它将与getUser的promise一起使用，因此登录时的errorMessage可能会丢失。我想阻止它，并从第一时间开始正确分配getUser

Answer 1

我不完全遵循您的要求，但这似乎是一个问题：

dispatch('getUserByLoginAuth',credentials.login);

问题不在于电话本身。问题在于它正在启动一个新的异步操作，而没有将其链接到现有的promise。从loginUser的角度来看，一切都已完成，它不会等待getUserByLoginAuth。

结果将是在完成then之前调用组件中的getUserByLoginAuth。我想这就是它似乎第二次起作用的原因，因为它正在从上次调用中提取相关数据。

解决方案只是将其更改为：

return dispatch('getUserByLoginAuth',credentials.login);

通过放入return会将其添加到Promise链中，因此loginUser在完成getUserByLoginAuth之前不会被视为完整。

如何从Axios响应Vuex的行动中调用行动？

1 个答案: