Question

我有一个很大的形式（10个以上的输入），我要将其值（如v模型）绑定到我在vuex存储中拥有的对象，提交时需要将axios请求发送到服务器（服务器将处理验证），并且响应错误对象（此字段为必填字段，该值太短，等等。）。

我将提供仅具有一个输入字段的简约示例。对象学生显然是针对学生本身的，错误对象将在那里处理来自服务器响应的错误。

App.vue

<template>
 <div>

  <input v-model="student.name">
  <span>{{error.name}}</span>

 </div>
</template>

<script>
import { mapActions } from "vuex";

 export default {
  name: "App",
  computed: {
   student.name: {
    get () {
      return this.$store.state.student.name
    },
    set (value) {
      this.$store.commit('setStudentName', value)
    }
   },
   error.name: {
    get () {
      return this.$store.state.error.name
    },
    set (value) {
      this.$store.commit('setErrorName', value)
    }
   }

  }
 }
</script>

这是mu vuex商店：

export default {
 state: {
  student: { name: ''},
  error: { name: ''}
 },
 mutations: {
  setStudentName: (state, student.name) => (state.student.name = student.name),
  setErrorName: (state, error.name) => (state.error.name = error.name)
 }

}

所以这很好用，但是假设有10个以上的输入，并且必须为10个输入x 2个对象（学生和错误）编写setter和getter，至少类似于40个setter＆getter。

有更简单的方法吗？

我也尝试过 vuex表单，虽然很棒，但是包不完整并且缺少文档，请尝试过 vuex-map-fields ，这仅适用于处理当时只有一个物体。

欢迎所有建议，这样做的正确方法是什么？

使用vuex最佳做法进行表单处理和验证

0 个答案: