Javascript 带子窗体的Vue模态诊断日志，提交数据

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

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

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

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

问题

• 选项1a，当我将“数据”对象传递到vuex时，当进行另一次更改时，表单正在更新v模型，但它在vuex中，因此在变异之外发生变异
• 选项1b要将大量字段映射到vuex中，似乎需要做很多工作
• 选项2由于有两个级别的组件（可调出），参考点看起来很笨重

---

您是否可以创建组件的内部对象，在v-model上使用him，并在单击“提交”按钮时更新vuex。

您可以使用a以避免在突变之外发生突变

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

这就是我目前所做的。我有一个“内部”对象，它绑定到所有表单元素的v-model。submit按钮是层次结构中较高的两个组件，因此我仍然需要将事件单击向下传递给孙子组件，或者从孙子组件中向上拉数据以放入vuex（这否定了好处）@Simon，您可以对组件使用自定义v模型。有一个很好的教程展示如何做到这一点。那么自定义的v模型到包装器中，然后再到表单组件中？因此要避免vuex吗？是的，为了简化更多，请使用mixin。这实际上让我想到，包装器负责选择表单，因此确实应该负责使用表单调用正确的方法，否则选择逻辑只会重复。因此，不使用vuex进行简化：）这是选项1b，但如果有20个表单字段，它可能会很长。包装器的用途是什么？包装器用于根据要添加的内容选择正确的表单，因此按钮A在模式中加载内容A，按钮B在同一模式中加载内容B，只是外孙子组件被交换，为什么不将其集成为模态组件的一部分？听起来您不需要将其作为单独的组件。总之，就我个人而言，当数据仅在两个组件之间共享和使用时（无论中间件组件如何），我通常不喜欢vuex。所以，我将jsut在父组件中为我的表单声明一个对象，将其作为道具传递（父->子），并发出任何更改（子->父）。我会使用上面的第二种方法（：value和@input）。若无法避免使用包装器，那个么只需使用$attrs和$listeners就可以更轻松地绑定。