使用 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 存储将包含提交的值。

使用 vuex 保存整个表单

Saving an entire form with vuex

vuex

vuejs2