Question

我向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 {{ 1}}正确返回数据。

我该如何解决？

Answer 1

让我们从这里开始

}).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调用返回的承诺。

您几乎不需要使用构造函数来创建新的Promise。有合法的用例，但是在已经有诺言的情况下，通常应改用某种形式的then链接。参见What is the explicit promise construction antipattern and how do I avoid it?

Vuex在Ajax查询中返回null（首次发送）

1 个答案: