Передача данных из FormulateForm в сопоставленное действие с помощью Vuex

Question

В настоящее время я использую Vue Formulate для передачи данных, используя @submit="login" на FormulateForm, в login(data)функция. Все работает нормально, пока я сохраняю логику внутри компонента и могу отправитьdata на мой сервер с помощью axios.

Дело в том, что я хотел бы поместить эту функцию входа в свой магазин Vuex в качестве действия, но когда я ссылаюсь на @submit="login" из FormulateForm к ...mapActions(["login"])функция, внутри нет данных. Я вошелdata в login(data) действие, и я получаю это:

Ответ от console.log(данные) в модуле vuex

Я мог бы привязать значения из моих входных данных к хранилищу и получить их оттуда, но я бы предпочел сохранить это простым и использовать @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 значения, как сейчас.

Answer 1

Вы не отправили действие login.

Сделай это

<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
  }
)

Тогда ваш магазин vuex user.js должен быть изменен на

const actions = {
  login: ({commit, state}, data) => { // it takes two arguments here
    console.log(data);
  }
};

Подробнее о действиях см. В документации Vuex.

Сделайте это, и это должно сработать.