Pass data from FormulateForm to a mapped action using Vuex - vue.js

Question

I'm currently using Vue Formulate to pass data, using #submit="login" on a FormulateForm, to a login(data) function.
Everything's working nicely as long as I keep the logic inside the component and I can send the data to my server using axios.
Thing is, I would like to put this login function in my Vuex store, as an action, but when I refer the #submit="login" from FormulateForm to the ...mapActions(["login"]) function, there is no data passed inside.
I logged data in the login(data) action, and I get this:
Response from console.log(data) in the vuex module
I could bind values from my inputs into the store and get them from there, but I'd prefer to keep this simple and use #submit.
Is it at all possible to do so?
Overview of the actual code that is working:
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">
Overview of what I want, that is not working:
methods: {
...mapActions(["login"])
)
<FormulateForm #submit="login">
Inside Vuex module 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
}
});
}
};
As stated, the console.log(data)does not return my FormulateForm values as it does currently.

Answer 1

You did not dispatch the action login.
Do this
<FormulateForm #submit="handleLogin">
methods: {
...mapActions(["login"]), // here, you have mapped `this.login()` to this.$store.dispatch('login')
handleLogin(data) {
this.login(data); // pass data as a parameter
}
)
Then your vuex user.js store should be changed to
const actions = {
login: ({commit, state}, data) => { // it takes two arguments here
console.log(data);
}
};
For more on actions, please check the Vuex documentation
Do these things and it should work.