Czy istnieje właściwy sposób resetowania początkowych danych komponentu w vuejs?

Question

Mam element z określonego zestawu danych wywoławcza:

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

to dane dla modalnego okna, więc kiedy to pokazuje chcę go uruchomić z tymi danymi. Jeśli użytkownik anuluje okno, chcę zresetować wszystkie dane do tego.

wiem, że mogę stworzyć metodę, ażeby dane i tylko ręcznie ustawić wszystkie właściwości danych z powrotem do ich pierwotnego:

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

Ale to wydaje się bardzo zaniedbany. Oznacza to, że jeśli kiedykolwiek dokonam zmiany we właściwościach danych składnika, będę musiał upewnić się, że pamiętam aktualizację struktury metody resetowania. To nie jest absolutnie straszne, ponieważ jest to mały modułowy komponent, ale powoduje, że część optymalizacyjna mojego mózgu krzyczy.

Rozwiązanie, które myślałem, że pracować będzie chwycić pierwotnych właściwości danych w ready metody, a następnie wykorzystanie zapisanych danych, aby zresetować składniki:

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

ale obiekt initialDataConfiguration zmienia się wraz z dane (co ma sens, ponieważ w metodzie read our initialDataConfiguration jest coraz zakres funkcji danych.

Czy istnieje sposób chwytając początkowych danych konfiguracyjnych bez dziedziczenie zakresu?

Czy przemyśliłem to i czy jest lepszy/łatwiejszy sposób na zrobienie tego?

Czy twarde kodowanie danych początkowych jest jedyną opcją?

Answer 1

1. ekstrakt wstępne dane do funkcji poza składnikiem
2. użyciu, które działają do ustawiania danych składowej
3. ponownego wykorzystania, które działają, aby przywrócić stan, gdy są potrzebne.

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

Aby przywrócić komponent data w bieżącej instancji składnika można spróbować to:

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

Prywatnie mam abstrakcyjne składnik modalne, który wykorzystuje szczeliny wypełnić różne części w oknie dialogowym. Kiedy dostosowany modal opakowuje ten abstrakcyjny modal, dane określone w gniazdach należą do zakresu parent component. Oto opcja abstrakcyjny modalnym który resetuje dane za każdym razem dostosowywane modalna jest pokazany (kod ES2015):

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

można dostroić swój modalne realizację kursu - powyżej mogą być wykonywane również w pewnym cancel haka.

Należy pamiętać, że mutacja opcji $parent od dziecka nie jest zalecana, jednak myślę, że może to być uzasadnione, jeśli element macierzysty po prostu dostosowuje modalny tryb abstrakcyjny i nic więcej.