如何在 Axios 响应 Vuex 上从动作中调用动作？

Question

I am trying to implement the following logic: call login then if response is ok, call method for retrieving user data.

Login action

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});
                    }

                });

        },

The second action dispatched from the one above:

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});
                });
        },

This action is called from the second time only(as I understand it is related to promise).

Here is a code from component which dispatches login action

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;
            },

Here also I am not sure if I am doing routing in correct place. As I understand then will work with promise from getUser so errorMessage from login might be lost. I would like to prevent it and make dispatch of getUser correctly from the first time

Answer 1

I don't entirely follow what you're asking but this seems likely to be a problem:

dispatch('getUserByLoginAuth',credentials.login);

The problem isn't the call itself. The problem is that it's kicking off a new asynchronous action without chaining it onto the existing promises. From the perspective of loginUser everything is done, it won't wait for getUserByLoginAuth .

The result will be that the then in your component will be called before getUserByLoginAuth is done. I would imagine this is why it seems to work the second time, because it's picking up the relevant data from the previous call.

The solution would be simply to change it to:

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

By putting in a return it adds it to the promise chain, so loginUser won't be treated as complete until getUserByLoginAuth is done.