我目前正在使用 Vue Formulate 将数据传递@submit="login"
给FormulateForm
一个login(data)
函数。只要我将逻辑保留在组件内,并且可以data
使用 axios 将其发送到我的服务器,一切都运行良好。
事情是,我想把这个登录函数作为一个动作放在我的 Vuex 存储中,但是当我将@submit="login"
from引用FormulateForm
到...mapActions(["login"])
函数时,里面没有传递数据。我登录data
了这个login(data)
动作,我得到了这个:
来自 vuex 模块中 console.log(data) 的响应
我可以将输入中的值绑定到商店并从那里获取它们,但我更愿意保持简单并使用@submit
.
有可能这样做吗?
正在运行的实际代码概述:
methods: {
login(data) {
axios
.post("http://localhost:3000/api/auth/login", data, {
withCredentials: true
})
.then(res => {
if (res.status === 200) {
this.setUserRole(res.data.isAdmin);
this.$router.push("/");
}
})
.catch(err => {
if (err.response.status === 404) {
// TODO: gestion d'erreur
} else if (err.response.status === 401) {
// TODO: gestion d'erreur
}
});
}
)
<FormulateForm @submit="login">
我想要的概述,这是行不通的:
methods: {
...mapActions(["login"])
)
<FormulateForm @submit="login">
在 Vuex 模块 user.js 中:
const actions = {
login: data => {
console.log(data);
axios
.post("http://localhost:3000/api/auth/login", data, { withCredentials: true })
.then(res => {
if (res.status === 200) {
this.setUserRole(res.data.isAdmin);
this.$router.push("/");
}
})
.catch(err => {
if (err.response.status === 404) {
// TODO: gestion d'erreur
} else if (err.response.status === 401) {
// TODO: gestion d'erreur
}
});
}
};
如前所述,它不会像当前console.log(data)
那样返回我的FormulateForm
值。