Forms 使用vuex最佳实践进行表单处理和验证

我有一个大表单（10+输入），其中的值我想与vuex store中的对象绑定（如v-model），提交时需要向服务器发送axios请求（服务器将处理验证），并用错误对象响应（此字段是必需的，此值太短，等等）

我将提供一个简单的例子，只有一个输入字段。 对象student显然是针对student本身的，error对象将在那里处理来自服务器响应的错误

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>

所以这很好，但是想象一下有10个以上的输入，并且必须为10个输入x 2个对象（学生和错误）编写setter和getter，这至少相当于40个setter和getter

有没有更简单的方法

我还尝试了vuex表单，这很好，但是包不完整，文档丢失，尝试了vuex映射字段，这在一次只适用于处理一个对象

---

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

使用道具创建可重用组件：1。财产，2。如果我要使用道具，我会在没有vuex的情况下坚持使用vue，我只想用正确的方式来做。1。为什么要将Vuex与此一起使用？2.为什么你认为使用可重用组件不是正确的方法？这只是一个“最小可复制的示例”，真实情况是绑定到此表单的大量数据需要在整个应用程序中从多个组件访问，因此，在这种情况下，使用道具并不是一个解决方案，它比使用10个或更多的计算绑定更好，这是一种正确的方法。Vue是一个基于组件的框架

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

}