Question

因此，基本上，我正在尝试在用户创建帐户时更新状态。到目前为止，我只能使用一个单独的输入（例如fName，lName，email ...）来执行此操作，但是我想同时触发这两个输入。例如，在data（）{newUserAcc：{fName，lName，电子邮件}}，然后发送并在商店中进行更新。我已经附加了两个文件，即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);
        },
    },
});

Answer 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>

VUE我该如何提交表格并更新状态

1 个答案: