Vuex возвращает ноль в Ajax-запросе (первая отправка) - PullRequest
Новая
       13

Vuex возвращает ноль в Ajax-запросе (первая отправка)

0 голосов
/ 10 июня 2019

Я отправляю письмо и пароль в Vuex: 

this.$store.dispatch('login', {
    email: this.email,
    password: this.password
}).then(console.log(this.$store.state.login));

В Vuex я использую Axios, этот код находится на actions: 

    login(context, payload) {
        return new Promise((resolve, reject) => {
            let options = {
                method: "post",
                data: payload,
                url: "/api/login"
            };
            axios(options)
                .then(response => {
                    context.commit("login", response.data);
                    resolve();
                })
        });
    },

далее я отправляю данные в mutations: 

login(state, login){
    state.login = login;
},

И на state: 

login: null

Это форма: 

<form method="post" @submit.prevent="sendLogin">
    <input type="email" id="email" name="email" v-model="email">
    <input type="password" id="password" name="password" v-model="password">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Когда я пишу email и password и нажмите ПЕРВЫЙ раз Submit .then(console.log(this.$store.state.login)); вернуть NULL, но когда я нажму второй раз Submit log, верните правильно данные.

Как мне решить эту проблему?

1 Ответ

1 голос
/ 11 июня 2019

Давайте начнем здесь: 

}).then(console.log(this.$store.state.login));

Это вызывает console.log немедленно и передает его возвращаемое значение undefined в then.Это эквивалентно написанию этого: 

const loginPromise = this.$store.dispatch('login', {
    email: this.email,
    password: this.password
});

const x = console.log(this.$store.state.login);

loginPromise.then(x);

Таким образом, в тот момент, когда происходит запись в журнал, асинхронный вход в систему не будет завершен, а зарегистрированное значение будет null.

.оберните вашу регистрацию функцией: 

this.$store.dispatch('login', {
    email: this.email,
    password: this.password
}).then(() => {
    console.log(this.$store.state.login);
});

Этого должно быть достаточно, но я также хотел бы отметить, что способ создания нового Promise, вероятно, не нужен в вашем магазине.Вместо этого должна быть возможность записать это так: 

login(context, payload) {
    const options = {
        method: "post",
        data: payload,
        url: "/api/login"
    };

    return axios(options)
        .then(response => {
            context.commit("login", response.data);
        });
    },

Так что это просто вернет обещание, возвращаемое вызовом then.

Вам редко нужно использовать конструкторсоздать новое обещание.Существуют законные варианты использования, но в случаях, когда у вас уже есть обещание, вы должны вместо этого использовать какую-либо форму then цепочки.См. Что такое явное обещание построения antipattern и как мне его избежать?

...