Question

我目前正在开发一个小型应用程序来在数据库上注册设备。

对于前端，我决定使用VueJS。

这就是我初始化应用的方式：

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

我将internalid，imei，tel和其他一些字段绑定到表单，数据存储在app.currentDevice上，这很棒。< / p>

现在我想将app.currentDevice推送到数组设备[]，这样我就可以添加更多。

我面临的问题是，如果我使用app.devices.push(app.currentDevice)，一旦修改currentDevice的内容，由于数组中的对象相同，数组中的数据也会发生变化，我不想要。我想让devices数组就像一个本地迷你数据库，它只保存信息，直到我将它发送到数据库。

我找到的解决方案是使用jQuery extend（）app.devices.push(jQuery.extend({}, app.currentDevice));，但我不认为这是最好的解决方案，我想知道是否还有其他更容易和更优雅的解决方案如何做到这一点。

有人可以提出建议吗？

非常感谢你！

Answer 1

我将假设你正在使用没有函数的Object，而只是想要深度复制到新对象的属性。如果您确定自己正在使用类似JSON的数据，那么您可以使用JSON.parse和JSON.stringify，这应该是一种快速克隆对象的方法：

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

这个新创建的device变量将独立于原始变量，您可以修改app.currentDevice而不用其它变量进行更新。

Answer 2

在处理从currentDevice到设备的推送的函数中，您需要CLONE当前设备对象，而不是按原样推送它，因为这将简单地创建从currentDevices到数组的引用。如果您使用的是ES6，则可以使用Object.assign（），因此：

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

如果你没有使用ES6，你可以使用下划线或lodash等效方法，我认为_.extend()如果我没有弄错

如何使用VueJS存储数据？

2 个答案: