Pass data from FormulateForm to a mapped action using Vuex

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.