Question

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

有一个存储此数据的vuex存储，并且组件字段用v-model绑定到了它。

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

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

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

Answer 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对象将所有值恢复为原始值。

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

1 个答案: