Axios 응답 Vuex에서 작업을 호출하는 방법은 무엇입니까?

Axios 응답 Vuex에서 작업을 호출하는 방법은 무엇입니까?

저는 다음과 같은 논리를 구현하려고 합니다: 로그인을 호출한 다음 응답이 괜찮다면 사용자 데이터를 검색하는 방법을 호출합니다.

로그인 동작

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

이 작업은 두 번째에서만 호출됩니다(약속과 관련이 있는 것으로 알고 있습니다).

다음은 로그인 작업을 발송하는 구성 요소의 코드입니다.

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의 약속으로 작동할 것이므로 로그인에서 오류 메시지가 손실될 수 있습니다.저는 그것을 막고 처음부터 getUser를 올바르게 발송하고 싶습니다.

저는 당신이 요구하는 것을 전적으로 이해하지는 못하지만 이것이 문제가 될 것 같습니다.

dispatch('getUserByLoginAuth',credentials.login);

문제는 통화 자체가 아닙니다.문제는 그것이 기존의 약속에 얽매이지 않고 새로운 비동기식 행동을 시작하고 있다는 것입니다.의 관점에서.loginUser모든 것이 완료되었습니다. 기다리지 않을 것입니다.getUserByLoginAuth.

결과는 다음과 같습니다.then이전에 구성 요소에서 호출됩니다.getUserByLoginAuth완료되었습니다.저는 이것이 두 번째로 작동하는 이유라고 생각합니다. 왜냐하면 그것은 이전 통화의 관련 데이터를 수집하고 있기 때문입니다.

솔루션은 단순히 다음으로 변경하는 것입니다.

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

를 넣음으로써.return그것은 그것을 약속 체인에 추가합니다, 그래서.loginUser까지 완전한 것으로 취급되지 않을 것입니다.getUserByLoginAuth완료되었습니다.

언급URL : https://stackoverflow.com/questions/57826201/how-to-call-action-from-action-on-axios-response-vuex