Gibt es eine geeignete Methode zum Zurücksetzen der Ausgangsdaten einer Komponente in vuejs?

Question

Ich habe eine Komponente mit einem bestimmten Satz von Ausgangsdaten:

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

Dies sind Daten für ein modales Fenster, so dass, wenn es zeigt, will ich es mit diesen Daten beginnen. Wenn der Benutzer aus dem Fenster bricht, möchte ich alle Daten auf diesen zurücksetzen.

Ich weiß, dass ich eine Methode erstellen können die Daten zurückgesetzt und nur manuell alle Daten Eigenschaften wieder an ihren ursprünglichen gesetzt:

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

Aber das scheint wirklich schlampig. Es bedeutet, dass wenn ich jemals eine Änderung an den Dateneigenschaften der Komponente vornehmen muss, ich sicherstellen muss, dass ich daran denke, die Struktur der Reset-Methode zu aktualisieren. Das ist nicht absolut schrecklich, da es eine kleine modulare Komponente ist, aber es macht den Optimierungsanteil meines Gehirns zum Schreien.

Die Lösung, die ich dachte, würde wäre arbeiten, um die anfänglichen Dateneigenschaften in einem ready Methode und verwenden Sie dann zu greifen, die Daten gespeichert, die Komponenten zurück:

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

Aber das initialDataConfiguration Objekt verändert sich zusammen mit der Daten (die unsere initialDataConfiguration erhalten den Umfang der Datenfunktion sinnvoll, da in dem Leseverfahren macht.

gibt es eine Möglichkeit die anfänglichen Konfigurationsdaten greifen, ohne den Umfang zu erben?

Überlege ich das und es gibt einen besseren/einfacheren Weg dies zu tun?

Ist Hardcoding der Ausgangsdaten die einzige Option?

Answer 1

1. Extrakt der Anfangsdaten in eine Funktion außerhalb der Komponente
2. verwenden, die die Anfangsdaten in der Komponente
3. Wiederverwendung Set-Funktion, die den Zustand nach Reset-Funktion, wenn nötig.

// 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(){ 
 
     this.$data = initialState(); 
 
    } 
 
}

Answer 2

Um Komponente data in einer Komponenteninstanz zurücksetzen können Sie dies versuchen:

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

Privat I abstrakte modalen Komponente haben, die Schlitze der verschiedenen Teile zu füllen verwendet der Dialog. Bei benutzerdefinierten modalen Wraps, die abstrakt modal sind, gehören die in Slots angegebenen Daten zu parent component scope. Hier ist nach Wahl des abstrakten modal, die Daten setzt jedes Mal die angepasste modal angezeigt wird (ES2015-Code):

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

Sie stimmen Ihre modal Implementierung natürlich fein kann - oben kann auch in einigen cancel Haken ausgeführt werden.

Bedenken Sie, dass Mutation von $parent Optionen von Kind wird nicht empfohlen, aber ich denke, es kann gerechtfertigt sein, wenn Elternkomponente ist nur die Anpassung der abstrakten Modal und nichts mehr.