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中的值。