在 vue/vuex 中保存或取消编辑答案

【问题标题】：Save or Cancel edits in vue/vuex在 vue/vuex 中保存或取消编辑
【发布时间】：2019-07-01 00:29:11
【问题描述】：

我有一个组件通过输入（文本字段、自定义选择等）处理一些用户数据，例如firstName、lastName 等

有一个vuex store存储这个数据，组件字段绑定v-model到它。

我希望这些字段是可编辑的，但是当用户开始编辑其中一个字段时，应该会出现 Save 和 Cancel 按钮。

单击Save 按钮应用更改，单击Cancel 应将所有字段恢复到开始编辑之前的状态。

我想知道这项任务是否有任何最佳实践/模式？

【问题讨论】：

您可以做的是为您的表单输入、getter(mapGetters) 和变量设置一个对象（数据）以确定是否有更改，然后您可以为表单对象添加一个观察者。然后，您将在观察者中添加一个条件，它将表单对象与 getter 进行比较。最后，如果有更改，您会将更改变量设置为 true。

标签： javascript vue.js vuejs2 vuex v-model

【解决方案1】：

我不知道这是否是最佳做法，但我可以解释一下我是如何处理类似事情的。我有 2 个属性，formFieldsModified 和 formFieldsInitialState。

data() {
    return {
        formFieldsModified: false,
        formFieldsInitialState: {}
    }
}

当组件被挂载/创建时，我调用了一个名为setFormFieldsInitialState 的方法。

created: function () {
    this.$store.dispatch('LOAD_USER').then((item) => {
        this.setFormFieldsInitialState()
    });
}

这是使用 lodash 创建对象的深层克隆，因此我可以与当前的 user 对象进行比较，看看是否有任何变化。

setFormFieldsInitialState() {
    this.formFieldsInitialState = _.cloneDeep(this.user)
    this.formFieldsModified = false;
}

然后你可以观察模型的变化，假设它叫做user。

watch: {
    'user': {
        handler: function (val) {
            this.formFieldsModified = (!_.isEqual(val, this.formFieldsInitialState)) ? true : false;
        },
        deep: true
    }
}

现在您可以使用this.formFieldsModified 根据是否修改了任何表单字段来切换按钮的可见性。

至于取消/保存操作——您必须有一个不同的方法来实际更新您的商店，因此除非用户单击保存按钮并调度更新商店的操作，否则什么都不会发生。然后，您可以使用创建的 formFieldsInitialState 对象将任何值恢复为原来的值。

【讨论】：

Fwiw：这里的方法相同