Vue.js & vuex - Zurücksetzen eines Formulars aktuellen Zustand

Question

Ich habe ein Formular in einem meiner Komponenten, die ich anfangs bevöl bin von einem Stück Zustand Klonen mit:

created() { 
    this.currentUser = Object.assign({}, this.$store.getters.user) 
} 

Ich möchte hinzufügen Klicken Sie auf die Schaltfläche, um dem Benutzer das Zurücksetzen auf den Anfangswert zu ermöglichen, nachdem er Änderungen vorgenommen hat.

Ich habe versucht, dies zu tun, indem Sie eine Funktion auf eine Taste wie so hinzufügen:

methods: { 
    cancelChanges() { 
    this.currentUser = Object.assign({}, this.$store.getters.user) 
    } 
} 

Dies ist jedoch nicht funktioniert. Was ist der richtige Weg, dies zu tun?

Codepen hier - https://codepen.io/stockzy/pen/xPGYXN?editors=1010#0

Answer 1

Okay, dachte ich es aus (mit einer wenig Hilfe).

Ich habe meine Daten an den Speicher gebunden, anstatt eine neue Instanz in die Komponente zu kopieren. Dieses regelte es:

created() { 
    this.currentUser = Object.assign({}, JSON.parse(JSON.stringify(this.$store.getters.user))) 
} 

und das gleiche gilt für die Schaltfläche:

cancelChanges() { 
    this.currentUser = Object.assign({}, JSON.parse(JSON.stringify(this.$store.getters.user))) 
}