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

我向Vuex发送电子邮件和密码：

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

在我使用Axios的Vuex中，此代码位于操作上：

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

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

接下来，我将数据发送到

程序：

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

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

并转到
状态
：

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>


提交

当我写
电子邮件
和
密码
并第一次单击
提交
时，然后单击（console.log（this.$store.state.login））返回
NULL
，但当我第二次单击
提交
日志
时，返回正确的数据

我如何解决这个问题？
让我们从这里开始：

然后（console.log（this.$store.state.login））；

这将立即调用
console.log
，并将其返回值
undefined
传递到
然后
。这相当于写下：

const loginPromise=this.$store.dispatch（'login'）{
电子邮件：this.email，
密码：这个是密码
});
const x=console.log（this.$store.state.login）；
登录建议。然后（x）；

因此，在日志记录发生时，异步登录将不会完成，记录的值将为
null

您需要的是将日志打包到一个函数中：

this.$store.dispatch（'login'）{
电子邮件：this.email，
密码：这个是密码
}).然后（（）=>{
log（这个.store.state.login）；
});

这应该足够了，但我还要指出，您创建新承诺的方式在您的商店中可能是不必要的。应该可以这样写：

登录（上下文、负载）{
常量选项={
方法：“张贴”，
数据：有效载荷，
url:“/api/login”
};
返回axios（选项）
。然后（响应=>{
提交（“login”，response.data）；
});
},

因此，这将只返回
然后
调用返回的承诺

您应该很少需要使用构造函数来创建新的承诺。有合法的使用案例，但在您已经有承诺的情况下，您通常应该使用某种形式的
，然后使用
链接。看