如何重构重复的条件 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 定义，如果已定义，则将其分配给 form 数据属性中的对应字段名称，否则传递给下一个元素：

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

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

})

}

在watch 属性中，深入观察form 对象（观察其嵌套字段），然后通过执行挂载钩子中的互惠操作来循环其键：

 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
    }
   }