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

Question

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

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

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

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

问题

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

Answer 1

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

Answer 2

您可以使用 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)"
    >

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

Vue modal diaglog with child form, submit data

javascript

vue.js

vuex