如何重構重復的條件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
    }
   }