使用 Vuex 将数据从 FormulateForm 传递到映射操作

Question

我目前正在使用 Vue Formulate 传递数据，在 FormulateForm 上使用 @submit="login" 到 login(data) 函数。只要我将逻辑保留在组件内部，一切都运行良好，并且我可以使用 axios 将 data 发送到我的服务器。

事情是，我想把这个登录函数作为一个动作放在我的 Vuex 存储中，但是当我将 @submit="login" 从 FormulateForm 引用到 ...mapActions(["login"]) 函数时，内部没有传递数据。我在 login(data) 操作中记录了 data，我得到了这个：

Response from console.log(data) in the vuex module

我可以将输入的值绑定到存储中并从那里获取它们，但我更愿意保持这种简单并使用 @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) 并不像当前那样 return 我的 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 store 应该改成

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

更多操作请查看 Vuex documentation

做这些事情应该会奏效。

使用 Vuex 将数据从 FormulateForm 传递到映射操作

Pass data from FormulateForm to a mapped action using Vuex

vue.js

vuex

vue-formulate