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

这应该有效地将数据“合并” x到this.$data，其中两个对象中匹配的所有属性都将具有x覆盖中的值的值this.$data。