Wie speichert man Daten mit VueJS?

Question

Ich entwickle gerade eine kleine Anwendung, um Geräte in einer Datenbank zu registrieren.

Für das Frontend habe ich mich für VueJS entschieden. Diese

ist, wie ich die App am Initialisierung:

//App Vuejs 
var app = new Vue({ 
    el: '#register-device-app', 
    data: { 
     currentDevice: { 
      internalid: '', 
      imei: '', 
      tel: '' 
     }, 
     devices[] 
    }, 
    .... 
}); 

Ich bin Bindung der internalid, imei, tel und einige andere Felder zu einem Formular und die Daten werden gespeichert auf app.currentDevice was ausgezeichnet ist.

Jetzt möchte ich die app.currentDevice zu den Array-Geräten [] schieben, damit ich mehr hinzufügen kann.

Das Problem, mit dem ich konfrontiert bin, ist, dass, wenn ich app.devices.push(app.currentDevice) verwende, sobald ich den Inhalt des currentDevice ändern, da das Objekt im Array das gleiche ist, werden die Daten im Array auch ändern, die ich nicht ' Ich will. Ich möchte das Geräte-Array wie eine lokale Mini-Datenbank haben, die nur die Informationen enthält, bis ich sie an die Datenbank sende.

Die Lösung, die ich fand, war jQuery extend() app.devices.push(jQuery.extend({}, app.currentDevice));, aber ich denke nicht, dass dies die beste Lösung ist und ich würde gerne wissen, ob es andere einfache und elegantere Möglichkeiten gibt, dies zu tun.

Kann jemand einen Vorschlag hinterlassen?

Vielen Dank!

Answer 1

Ich nehme an, Sie arbeiten mit einem Objekt ohne Funktionen und nur Eigenschaften, die Sie tief in ein neues Objekt kopieren möchten. Wenn Sie sicher sind, bist du mit JSON-ähnlichen Daten arbeiten, könnten Sie JSON.parse und JSON.stringify verwenden, die eine schnelle Art und Weise zu tief Klon wie, dass ein Objekt sein sollte:

var device = JSON.parse(JSON.stringify(app.currentDevice)); 

Das neu erstellt device Variable ist unabhängig von der ursprünglichen Variablen und Sie können app.currentDevice ändern, ohne dass die andere Variable aktualisiert wird.

Answer 2

In Ihrer Funktion, die den Push von currentDevice zu Geräten verarbeitet, müssen Sie das aktuelle Geräteobjekt KLONEN, nicht wie es ist, da dies einfach einen Verweis von den currentDevices auf das Array erstellt. Wenn Sie ES6 verwenden, können Sie Object.assign() verwenden, also:

hander() { 
    // copy this.current device props to new empty object 
    const device = Object.assign({}, this.currentDevice) 
    // push this new object 
    devices.push(device) 
    // do whatever you need to do to reset currentDevice ... 
} 

Wenn Sie nicht ES6 verwenden, können Sie Strich oder lodash gleichwertige Methoden verwenden können, denke ich, es _.extend() ist, wenn ich nicht bin falsch