Vue组件保存数据以备后用答案

【问题标题】：Vue component save data for laterVue组件保存数据以备后用
【发布时间】：2018-06-23 15:56:00
【问题描述】：

我正在尝试存储数据以供以后在 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

如何不像第一个示例那样添加额外的容器

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：