使用 vuex 保存整个表单

Question

我刚开始使用 Vue 和 Vuex，想知道如何将整个表单保存到 API。我找到了this，它似乎只是一个单一领域的好解决方案。这是否意味着我需要为表单中的每个字段使用 getter 和 setter 执行自定义计算属性？我了解数据绑定如何很好地用于本地存储（这似乎是大多数示例使用的），但是每次击键都更新后端服务似乎有点过头了。

我想做的是在用户执行操作（例如单击保存按钮）时在表单上执行一次提交，并且我觉得为每个字段创建计算属性或方法不是正确的方法.

模板：

<div v-show="isEditing" class="edit-view">
  <form>
    <div class="form-group">
      <label>Title</label>
      <input :value="item.title" type="text" class="form-control" @input="update"  />
    </div>
    <div class="form-group">
      <label>Description</label>
      <input :value="item.description" type="text" class="form-control" @input="update" />
    </div>
  </form>
</div>

JS：

export default {
  name: 'todo',
  props: ['item'],
  data() {
    return {
      isEditing: false
    }
  },
  methods: {
    showEdit() {
      this.isEditing = true;
    },
    update() {
      // Commit a change to vuex store
    }
  }

Answer 1

将表单数据保留在表单组件的本地。所以在data() 中定义所有的表单属性。将v-model 应用于所有输入元素和相应的数据属性。当用户点击提交时，使用表单数据进行一次提交。

这样，您的表单组件将包含编辑的值，而 vuex 存储将包含提交的值。