如何重构重复的条件Vue.js代码？

Question

我的Vue.js组件中包含以下代码：

mounted() {
    if (localStorage.dobDate) {
      this.form.dobDate = localStorage.dobDate;
    }

    if (localStorage.dobMonth) {
      this.form.dobMonth = localStorage.dobMonth;
    }

    if (localStorage.dobYear) {
      this.form.dobYear = localStorage.dobYear;
    }
  },

  watch: {
    "form.dobDate": {
      handler: function(after, before) {
        localStorage.dobDate = after;
      },
      deep: true
    },
    "form.dobMonth": {
      handler: function(after, before) {
        localStorage.dobMonth = after;
      },
      deep: true
    },
    "form.dobYear": {
      handler: function(after, before) {
        localStorage.dobYear = after;
      },
      deep: true
    }

询问您是否可以看到它重复性很强，例如，如果我的表格很大，并且我不想在每个字段中都这样做。 有什么办法可以使它变得更干吗？ 例如，是否可以通过某种方式使表单中的任何字段更具动态性？

Answer 1

在已挂接的挂钩中，创建一个数组localStorage字段[“ dobDate”，“ dobMonth”，“ dobYear”]，并使用forEach方法遍历该数组，对于每个字段localStorage[fieldName]请检查是否使用conditional operator定义了该字段，是否已定义assign将其传递给form数据属性中的对应字段名称，否则传递给下一个元素：

mounted(){
["dobDate","dobMonth","dobYear"].forEach(field=>{

localStorage[field]?this.form[field]=localStorage[field]:{};

})

}

在watch属性中，深入观察form对象（观察其嵌套字段），然后通过执行在已安装的hook中进行的倒数操作，遍历其键：

 watch: {
    form: {
      handler: function(after, before) {
        Object.keys(after).forEach(key=>{
          localStorage[key]=after[key]
       })
      },
      deep: true
    }
   }

Answer 2

这是具有多个（无深度）观察者的另一种方法。

data: {
  form: {},
  dateFields: ['dobDate', 'dobMonth', 'dobYear']
},

mounted() {
  for (const dateField of this.dateFields) {
    if (localStorage[dateField])
      this.$set(this.form, dateField, localStorage[dateField])
  }
},

created() {
  for (const dateField of this.dateFields) {
    this.$watch('form.' + dateField, function(after, before) {
      localStorage[dateField] = after;
    });
  }
}

我忽略了它是否比仅一个深度监视者有效或高或低。 这可能取决于您的数据更改方式。

Answer 3

我确定您必须有理由使用localStorage将表单数据保存在localStorage中，因此使用此代码，您可以将整个表单对象传递给localStorage并进行检索。 在这种情况下，任何形式上的更改都会使该手表运行

mounted() {
    if (localStorage.form) {
      this.form = localStorage.form
    }
  },

 watch: {
    "form": {
      handler: function(after, before) {
        localStorage.form = after;
      },
      deep: true
    }
   }