vuex 디스패치 응답 처리 방법

vuex 디스패치 응답 처리 방법

정답이 눈앞에 있을 것 같은데도 백기를 들고 조언을 구한다.

API(AWS)에 제출하고 결과에 따라 행동하는 로그인 폼이 있습니다.내가 안고 있는 문제는 한때handleSubmit메서드가 호출됩니다.즉각으로 액세스 합니다.console.log스테이트먼트...놀랄 것도 없이 돌아온다.dispatch result: undefined

이것이 vue.js의 직접적인 함수가 아니라 javascript set을 어떻게 실행하고 있는지 알고 있습니다.

로그인 컴포넌트는 다음과 같습니다.

// SignInForm.vue

handleSubmit() {
    try {
        const {username, password} = this.form;

        this.$store.dispatch('user/authenticate', this.form).then(res => {
            console.log('dispatch result: ', res);
        });
    } catch (error) {
        console.log("Error: SignInForm.handleSubmit", error);
    }
},
...

저희 가게에서는 이렇게 하고 있습니다.다음 주소로 보냅니다.UserService나는 창조했다.모든 게 잘 되고 있어요.올바른 응답을 받고 필요한 모든 것을 로그아웃할 수 있습니다.그UserService는 Auxios 요구(AWS Amplify)를 발행하여 응답을 반환합니다.

// user.js (vuex store)

authenticate({state, commit, dispatch}, credentials) {
    dispatch('toggleLoadingStatus', true);

    UserService.authenticate(credentials)
        .then(response => {
            dispatch('toggleLoadingStatus', false);

            if (response.code) {
                dispatch("setAuthErrors", response.message);
                dispatch('toggleAuthenticated', false);
                dispatch('setUser', undefined);

                // send error message back to login component
            } else {
                dispatch('toggleAuthenticated', true);
                dispatch('setUser', response);

                AmplifyEventBus.$emit("authState", "authenticated");

                // Need to move this back to the component somehow
                //     this.$router.push({
                //         name: 'dashboard',
                //     });
            }

            return response;
        });
},
...

에러가 발생했을 경우, 에러를 그 상태로 설정할 수 있습니다만, 다른 컴포넌트에서는 에러에 액세스 하는 방법을 알 수 없습니다.세팅을 해봤는데data속성을 스토어를 참조하는 계산 메서드로 변환합니다만, 에러가 발생합니다.

인증에 성공하면 vue-router도 사용할 수 없습니다.제가 읽은 바로는 어쨌든 주(州)에서는 그렇게 하고 싶지 않습니다.그러니까 성공 응답을 반환할 필요가 있습니다.SignInFormvue-router를 사용하여 사용자를 대시보드로 리디렉션할 수 있습니다.

네, SO에 투고하고 모든 것을 재평가하는 데 6시간밖에 걸리지 않았습니다.사실 그것은 다소 어리석은 실수였다.하지만 여기 있는 다른 누군가를 돕기 위해 내가 잘못한 건...

// SignInForm.vue

async handleSubmit() {
    try {
        await this.$store.dispatch("user/authenticate", this.form)
            .then(response => {
                console.log('SignInForm.handleSubmit response: ', response);  // works

            if (response.code) {
                this.errors.auth.username = this.$store.getters['user/errors'];
            } else {
                this.$router.push({
                    name: 'dashboard',
                });
            }
        }).catch(error => {
            console.log('big problems: ', error);
        });
    } catch (error) {
        console.log("Error: SignInForm.handleSubmit", error);
    }
},
...

제 첫 번째 실수는 이렇습니다.전화하고 있었어요.asyncmethod to 다른 method - 그러나 그 method를 명령하지 않음async콜(er) 메서드 응답이 즉시 실행되었습니다.업데이트된 vuex 스토어는 다음과 같습니다.

 // user.js (vuex store)

 async authenticate({state, commit, dispatch}, credentials) { // now async
    dispatch('toggleLoadingStatus', true);

    return await UserService.authenticate(credentials)
        .then(response => {
            console.log('UserService.authenticate response: ', response);  // CognitoUser or code

            dispatch('toggleLoadingStatus', false);

            if (response.code) {
                dispatch("setAuthErrors", response.message);
                dispatch('toggleAuthenticated', false);
                dispatch('setUser', undefined);
            } else {
                dispatch('toggleAuthenticated', true);
                dispatch('setUser', response);

                AmplifyEventBus.$emit("authState", "authenticated");
            }

            return response;
        });
},
...

두 번째 오류는 vuex 스토어에서 메서드 결과를 전혀 반환하지 않았다는 것입니다.

이전 방식:

UserService.authenticate(credentials)

더 나은 방법:

return await UserService.authenticate(credentials)

이걸로 누군가 몇 시간을 절약할 수 있길 바랍니다.¯_(ツ)_/¯

이것은 Vue3에서 유효합니다.

export default {
    name: 'Login',
    methods: {
        loginUser: function () {
            authenticationStore.dispatch("loginUser", {
                email: 'peter@example.com',
            })
            .then(response => {
                if (response.status === 200) {
                    console.log('Do something')
                }
            });
        },
    },
}

스토어에서는 약속인http 응답을 간단하게 전달할 수 있습니다.

const authenticationStore = createStore({
    actions: {
        loginUser({commit}, {email}) {
            const data = {
                email: email
            };

            return axios.post(`/authentication/login/`, data)
                .then(response => {
                    toastr.success('Success')
                    return response
                })
        },

    }
})

언급URL : https://stackoverflow.com/questions/59915293/how-can-i-handle-a-vuex-dispatch-response