带有子表单的Vue模态对话框，提交数据

Question

黑色边界是模态组件，红色是具有一些表单域的组件。 按钮，保存/取消基于父模式组件。表单实际上比模态低2级（模态组件->子包装器->子表单），所以vuex感觉是更好的选择。

表单中还有一个文件选择器。

当用户单击“保存”按钮时，从组件（可能是多种表单之一）获取数据的最佳方式是什么。

选项 1 - 在每个字段更改时，调用一个方法来更新 VUEX 中的数据。
选项 1a - 更新包含整个表单的每个字段更改的对象
选项 1b - 在更改时单独更新每个字段。
选项 2 - 使用 refs 在 child 中调用某种提交方法。
选项 3 - 比 1 或 2 更好的方法！

问题

• 选项 1a，当我将“数据”对象传递给 vuex 时，当进行另一项更改时，表单正在更新 v-model 但它在 vuex 中，因此它在突变之外发生了突变。
• 选项 1b 似乎需要做很多工作才能将大量字段映射到 vuex。
• 选项 2 因为有 2 个级别的组件，（交换出来）参考看起来很笨重

Answer 1

您可以使用computed setter 来避免在突变之外发生突变。

computed: {
    fieldOne: {
        get () {
            return this.$store.state.data.fieldOne
        },
        set (newValue) {
            this.$store.commit('data/fieldOne', newValue)
        }
    }

}

或者，您可以使用 :value 和 @input 代替 v-model

    <input
      :value="$store.state.data.fieldOne"
      @input="$store.commit('data/fieldOne', $event.target.value)"
    >

Answer 2

你可以创建组件的内部对象，在 v-model 上使用他，然后点击提交按钮时更新 vuex。