Vue组件保存数据以供日后使用

Question

我正在尝试存储数据以供以后在vue组件中使用。

数据功能，例1

data:
function () {
     return {
         username: '',
         phoneNumber: '',
       }    
}

保存方法

var x = JSON.stringify(this.$data)
localStorage.setItem('xxx', x);

加载失败，代码：

var x = JSON.parse(localStorage.getItem('xxx'));
this.$data = x;  // <<< Not working

当我更改数据功能（添加容器）时

data:
function () {
     return {
         container:{
         username: '',
         phoneNumber: '',
       }
     }
}

加载

var x = JSON.parse(localStorage.getItem('xxx'));
this.$data.container = x.container;  // <<< Works 

如何不添加第一个示例中的其他容器

Answer 1

您无法以您尝试的方式替换$data。相反，请尝试利用Object.assign()：

var x = JSON.parse(localStorage.getItem('xxx'));
Object.assign(this.$data, x);

这应该有效地＆＃34;合并＆＃34;从x到this.$data的数据，其中两个对象中匹配的任何属性都将x中的值覆盖this.$data中的值。