VUE如何提交表单并更新状态答案

【问题标题】：VUE how can i submit a form and update the stateVUE如何提交表单并更新状态
【发布时间】：2020-07-23 22:39:30
【问题描述】：

所以基本上我试图在用户创建帐户时更新状态。到目前为止，我只能用一个单一的输入来做到这一点，例如 fName、lName、电子邮件......但我想同时触发两者......例如......在 data(){ newUserAcc: {fName,lName, email}} 然后发送并在商店中更新它。我附上了两个文件，vue 和 store.js。

<template>
  <div>
    <v-app
      style="background-image: url('https://blog.modsy.com/wp-content/uploads/2019/06/D2_Full.jpg')"
    >
      <v-container class="pa-12">
        <v-row>
          <v-card class="pa-16">
            <v-card-title>
              Tenant
            </v-card-title>
            <v-form>
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_fName"
                label="First Name"
              />
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_lName"
                label="last Name"
              />
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_email"
                label="email"
              />

              <v-row>
                <v-btn rounded color="black" class="white--text" href="/acc-for"
                  >Back</v-btn
                >
                <v-btn
                  @click.prevent="addUser_fName"
                  rounded
                  color="black"
                  class="white--text"
                  >Next</v-btn
                >
              </v-row>
            </v-form>
          </v-card>
        </v-row>
      </v-container>
    </v-app>
  </div>
</template>
<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      newUser_fName: "",
      newUser_lName: "",
      newUser_email: "",
      newUser_choosePW: "",
      newUser_confirmPW: "",
    };
  },
  methods: {
    ...mapMutations([
      "ADD_USER_FNAME",
      "ADD_USER_LNAME",
      "ADD_USER_EMAIL",
      "ADD_USER_PW",
    ]),
    addUser_fName: function() {
      this.ADD_USER_FNAME(this.newUser_fName);
      this.newUser_fName = "";
    },
    addUser_lName: function() {
      this.ADD_USER_LNAME(this.newUser_lName);
      this.newUser_lName = "";
    },
    addUser_email: function() {
      this.ADD_USER_EMAIL(this.newUser_email);
      this.newUser_email = "";
    },
    addUser_pw: function() {
      this.ADD_USER_PW(this.newUser_pw);
      this.newUser_pw = "";
    },
  },
};
</script>
<style></style>

import vuex from "vuex";
import axios from "axios";
import Vue from "vue";

Vue.use(vuex, axios);

export default new vuex.Store({
    state: {
        fname: [],
        lname: [],
        email: [],
        pw: [],
        newUser: [],
    },
    getters: {},
    mutations: {
        ADD_USER_FNAME: (state, user) => {
            state.fname.push(user);
        },
        ADD_USER_LNAME: (state, user) => {
            state.lname.push(user);
        },
        ADD_USER_EMAIL: (state, user) => {
            state.email.push(user);
        },
    },
});

【问题讨论】：

请问为什么每个字段都是分开的？您可以只创建一个由这些字段组成的对象数组，然后只创建一个突变来添加用户。
@rjcarl - 这实际上是我想做的，但我不知道该怎么做。我研究了很多，他们展示的只是如何一次启动一个
我刚刚发布了一个答案，您需要根据自己的喜好编辑一些部分。但这可能是您需要的结构。

标签： javascript vue.js vuejs2 axios vuex

【解决方案1】：

考虑到您有这样的商店...

export default new Vuex.Store({
  state: {
    users: []
  },
  mutations: {
    addUser: (state, payload) => {
      state.users.push(payload.user); // add your newly registered user to the user state
    }
  },
  actions: {
    addUser: ({ commit }, payload) => {
      commit('addUser', payload);
    }
  }
});

在你的表单组件中。

<template>
  <div>
    <v-app
      style="background-image: url('https://blog.modsy.com/wp-content/uploads/2019/06/D2_Full.jpg')"
    >
      <v-container class="pa-12">
        <v-row>
          <v-card class="pa-16">
            <v-card-title>
              Tenant
            </v-card-title>
            <v-form>
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_fName"
                label="First Name"
              />
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_lName"
                label="last Name"
              />
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_email"
                label="email"
              />

              <v-row>
                <v-btn rounded color="black" class="white--text" href="/acc-for"
                  >Back</v-btn
                >
                <v-btn
                  color="black"
                  class="white--text"
                  @click="registerUser"
                  >Next</v-btn
                >
              </v-row>
            </v-form>
          </v-card>
        </v-row>
      </v-container>
    </v-app>
  </div>
</template>

<script>
  export default {
    ...
    data() {
      return {
        newUser_fName: "",
        newUser_lName: "",
        newUser_email: "",
        newUser_choosePW: "",
        newUser_confirmPW: "",
      }
    },
    methods: {
      registerUser() {
        fetch('register/endpoint') // request is optional, if you wan to add the user to your database. If not, you can just dispatch the action 
          .then(() => {
            // if Request is a success, the user will be added to the user state
            this.$store.dispatch('addUser', {
              first_name: this.newUser_fName,
              last_name: this.newUser_lName,
              email: this.newUser_email,
              password: this.newUser_choosePW
            })
          })
      }
    }
  }
</script>

【讨论】：