javascript - 如何重构重复的条件 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

在挂载的钩子(Hook)中创建一个 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 对象(观察它的嵌套字段)，然后通过执行在 mounted 钩子(Hook)中进行的相互操作循环遍历它的键:

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