Vuejs'de bir bileşenin ilk verilerini sıfırlamanın uygun bir yolu var mı?

Belirli bir başlangıç ​​verileri kümesine sahip bir bileşenim var:

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
        submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: null,
            address: null,
            position: null
        }
}

Bu, kalıcı bir pencere için veridir, bu yüzden gösterdiği zaman bu verilerle başlamasını istiyorum. Kullanıcı pencereden iptal ederse, tüm verileri buna sıfırlamak istiyorum.

Verileri sıfırlamak için bir yöntem oluşturabileceğimi ve tüm veri özelliklerini manuel olarak orijinallerine geri ayarlayabileceğimi biliyorum:

reset: function (){
    this.modalBodyDisplay = 'getUserInput';
    this.submitButtonText = 'Lookup';
    this.addressToConfirm = null;
    this.bestViewedByTheseBounds = null;
    this.location = {
        name: null,
        address: null,
        position: null
    };
}

Ama bu gerçekten özensiz görünüyor. Bu, bileşenin veri özelliklerinde bir değişiklik yaparsam, sıfırlama yönteminin yapısını güncellemeyi hatırladığımdan emin olmam gerektiği anlamına gelir. Küçük bir modüler bileşen olduğu için bu kesinlikle korkunç değil, ama beynimin optimizasyon kısmının çığlık atmasına neden oluyor.

İşe yarayacağını düşündüğüm çözüm, bir readyyöntemdeki ilk veri özelliklerini almak ve ardından bu kaydedilen verileri bileşenleri sıfırlamak için kullanmak olacaktır:

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', 
        submitButtonText: 'Lookup', 
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: null,
            address: null,
            position: null
        },
        // new property for holding the initial component configuration
        initialDataConfiguration: null
    }
},
ready: function (){
    // grabbing this here so that we can reset the data when we close the window.
    this.initialDataConfiguration = this.$data;
},
methods:{
    resetWindow: function (){
        // set the data for the component back to the original configuration
        this.$data = this.initialDataConfiguration;
    }
}

Ancak initialDataConfigurationnesne verilerle birlikte değişiyor (bu mantıklı çünkü okuma yönteminde initialDataConfigurationveri işlevinin kapsamını alıyoruz.

Kapsamı devralmadan ilk yapılandırma verilerini almanın bir yolu var mı?

Bunu çok mu düşünüyorum ve bunu yapmanın daha iyi / daha kolay bir yolu var mı?

İlk verileri kodlamak tek seçenek mi?

1. ilk verileri bileşenin dışındaki bir işleve çıkarmak
2. bileşendeki ilk verileri ayarlamak için bu işlevi kullanın
3. gerektiğinde durumu sıfırlamak için bu işlevi yeniden kullanın.

// outside of the component:
function initialState (){
  return {
    modalBodyDisplay: 'getUserInput', 
    submitButtonText: 'Lookup', 
    addressToConfirm: null,
    bestViewedByTheseBounds: null,
    location:{
      name: null,
      address: null,
      position: null
    }
  }
}

//inside of the component:
data: function (){
    return initialState();
} 


methods:{
    resetWindow: function (){
        Object.assign(this.$data, initialState());
    }
}

dataMevcut bir bileşen örneğindeki bileşeni sıfırlamak için şunu deneyebilirsiniz:

Object.assign(this.$data, this.$options.data())

Özel olarak, iletişim kutusunun çeşitli bölümlerini doldurmak için yuvaları kullanan soyut mod bileşenine sahibim. Özelleştirilmiş modal sarmalar, modal soyut olduğunda, yuvalarda belirtilen veriler üst bileşen kapsamına aittir . Aşağıda, özelleştirilmiş modal her gösterildiğinde verileri sıfırlayan soyut model seçeneği bulunmaktadır (ES2015 kodu):

watch: {
    show (value) { // this is prop's watch
      if(value) {
        Object.assign(this.$parent.$data, this.$parent.$options.data())
      }
    }
}

Elbette, modal uygulamanıza ince ayar yapabilirsiniz - yukarıda bazı durumlarda da çalıştırılabilir cancel.

Çocuktan $parentgelen seçeneklerin mutasyonunun tavsiye edilmediğini aklınızda bulundurun , ancak ana bileşen sadece soyut modeli özelleştiriyorsa ve başka bir şey yapmıyorsa bunun haklı olabileceğini düşünüyorum.

Dikkat, Object.assign(this.$data, this.$options.data())bağlamı data () ile bağlamaz.

Öyleyse bunu kullan:

Object.assign(this.$data, this.$options.data.apply(this))

cc bu cevap aslında buradaydı

Uyarılardan rahatsızsanız, bu farklı bir yöntemdir:

const initialData = () => ({})

export default {
  data() {
    return initialData();
  },
  methods: {
    resetData(){
      const data = initialData()
      Object.keys(data).forEach(k => this[k] = data[k])
    }
  }
}

$ Data ile uğraşmanıza gerek yok.

Verileri bir alt bileşenin içindeki orijinal durumuna sıfırlamak zorunda kaldım, bu benim için çalıştı:

Üst bileşen, alt bileşenin yöntemini çağırır:

     <button @click="$refs.childComponent.clearAllData()">Clear All</button >

     <child-component ref='childComponent></child-component>

Alt bileşen:

1. dış işlevde veri tanımlama,
2. veri nesnesini fonksiyona ve fonksiyonun dışına atama

3. üst bileşen tarafından çağrılacak clearallData () yöntemini tanımlama

   function initialState() {
      return { 
        someDataParameters : '',
        someMoreDataParameters: ''
             }
     }
   
   export default {
      data() {
       return initialState();
     },
       methods: {
     clearAllData() {
     Object.assign(this.$data, initialState());
   },