Как я могу справиться с ответом vuex?

Question

Я поднимаю белый флаг и спрашиваю предложения, хотя я чувствую, что ответ, вероятно, прямо перед моим лицом.

У меня есть форма для входа, которую я отправляю в API (AWS) и действую в соответствии с результатом. У меня возникает проблема, как только вызывается метод handleSubmit, я сразу же получаю оператор console.log ... который неудивительно возвращает dispatch result: undefined

Я понимаю, что это, вероятно, не прямой функция vue. js, но как у меня выполняется набор javascript.

Вот мой компонент входа:

// 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 делает запрос топора ios (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, если я успешно аутентифицирован. Из того, что я прочитал, я действительно не хочу делать это в состоянии, так что это означает, что мне нужно вернуть ответ об успешном выполнении обратно компоненту SignInForm, чтобы я мог использовать vue -router для перенаправления пользователь на приборной панели.

Answer 1

Да. Просто у меня ушло ~ 6 часов, я отправил сообщение в SO, а затем переоценил все (снова), чтобы понять это. На самом деле это была глупая ошибка. Но чтобы помочь кому-то еще, вот что я делал неправильно ...

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

Вот моя первая ошибка: я звонил из async метода в другой метод - но не говорил, что этот метод async поэтому ответ метода call (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)

Надеюсь, это сэкономит кому-то несколько часов. ¯_ (ツ) _ / ¯