Question

我在vuex商店中有一个相当复杂的对象。该对象（来自Firebase）具有一些浅层属性，并且还嵌套了其他对象和数组。我一直在建立一个复杂的表单来编辑该对象。我还希望在创建新实例时使用Vue。

我不知道保存/取消策略。我当前的Vue会像这样对真实对象进行突变：

<template>
   <input v-model="complexObject.someProp" ...
   <v-btn @click="methodToMutateSomeNestedObject()" ...
   ...

complexObject间接来自商店：

...mapGetters(['complexObjectCollection'])

computed: {
    complexObject () {
      let index = this.$route.query.index
      return (index) ? this.complexObjectCollection[index] : this.newComplexObject
    }

data: () => ({
  newComplexObject: { propA: '', propB: {}, propC: [{}] },

深层变异的方法可以做到这一点：

methods: {
  methodToMutateSomeNestedObject () {
    this.$set(this.complexObject.nestedObject, 'nestedProp', 'Some Value')
  }
}

经过长时间的努力，我已经完成了这项工作，但是直到现在才尝试编写保存并取消：

save () {
  let isNewObject = !this.$route.query.index
  if (isNewObject) {
    // easy: add this.complexObject to this.$store
  } else {
    // even easier: we've been mutating the $store object
    // BUT UH-OH! see cancel()
  }
}
cancel () {
  let isNewObject = !this.$route.query.index
  if (isNewObject) {
    // don't do anything, just change pop route
  } else {
    // PROBLEM: How to revert all the changes I made to the object??

在开始时是否应该保存对象的深层副本，然后将其写回存储中？还是我应该创建一个深层副本，并使用表单对其进行修改，然后仅将其写入保存状态？

无论如何，我如何获得Firestore对象的深层副本？

谢谢。

如何使用javascript（Vue）制作新的/编辑表单

0 个答案: