javascript 保存或取消vue/vuex中的编辑

rkttyhzu  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(141)

我有一个通过输入(文本字段、自定义选择等)处理一些用户数据的组件,如firstNamelastName等。
有一个vuex存储器存储这些数据,组件字段通过v-model绑定到它。
我希望这些字段是可编辑的,但当用户开始编辑其中一个字段时,按钮SaveCancel应该出现。
点击Save按钮应用变更,点击Cancel应将所有字段恢复到编辑开始前的状态。
我想知道对于这项任务是否有任何最佳实践/模式?

vuv7lop3

vuv7lop31#

我不知道这是否是最佳实践,但我可以解释一下我是如何处理类似的问题的,我有两个属性,formFieldsModifiedformFieldsInitialState

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来切换按钮的可见性,这取决于是否修改了任何表单字段。
至于cancel/保存操作--你必须有一个不同的方法来实际更新你的存储,所以除非用户点击save按钮并分派一个更新存储的操作,否则什么都不会发生,然后你可以使用创建的formFieldsInitialState对象将任何值恢复到它们最初的样子。

oxcyiej7

oxcyiej72#

我曾经用这种方法处理我的组件,但是我开始认为复杂性可能在于这种方法可能混淆了关注点。我今天面临着一个类似的问题,一个组件正在跟踪一个多选复选框。我认为也许 * 子组件 * 应该是哑的--呈现选项和通信选择。然后不管是什么在管理数据(在您的例子中是vuex,在我的例子中是父组件)应该决定业务规则如何处理该数据。
所以我的解决方案与Charlie的类似,但不是让子组件在挂载时将数据复制到临时/初始状态;您的vuex(在我的例子中是我的父组件)将管理两个数据集(formFieldsSaved和formFieldsWorking),并负责提交工作集以覆盖某个操作的Saved值。我认为从概念上讲,这可能是一种更干净的方法,它通过能够避免安装和创建隐藏v模型属性的数据属性而得到加强。

// approach 1
controller
   - passes final values into prop of
child component
   - accepts prop.values
   - initializes with data.modifiedValues = null
   - on mount: copy prop.values into data.modified
   - selections use data.modified as v-models
   - on commit, communicate data.modified up w event
controller
   - hear event
   - modify values

对比

// approach 2
controller
   - manages savedValues, workingValues, and interactions between them
child component
   - accepts prop.values (in this case workingValues)
   - onChange sends signal up to 
controller
   - hear event
   - modify workingValues
   - commit workingValues to savedValues whenever the controller wants (probably an "update" event from the form)
   - commit savedValues back to working values whenever the controller wants (probably a "reset" even from the form)

这只是我目前的做法。我想我会把它作为一个替代品。但我很有兴趣看看其他开发人员的想法,因为这是一个常见的情况。

相关问题