在vuex中使用了vuex-persistedstate持久化插件 为什么页面刷新 非标准属性丢失

let size = 0; this.deid.forEach((item) => { const num = parseFloat(item.size); if (!isNaN(num)) { // 判断是否为数字 size += num; } }); this.deid.size = size; this.deid.timestamp = new Date().getTime(); // console.log(this.deid, "2"); this.$store.commit("DOLOAD_REDING", this.deid); this.recordList = this.$store.state.Download;

由于使用了 vuex-persistedstate 插件，它会自动将 this.$store.state 中的数据保存到本地存储中（默认是使用 localStorage），在页面刷新时也会自动从本地存储中读取这些数据并同步到 this.$store.state 中。但是，该插件只能保存原始类型（Primitive）和普通对象（Plain object），而不能直接保存非标准属性。

在上面的代码中，this.deid 实际上是一个数组类型的对象，它的 size 和 timestamp 属性都是直接添加到该对象上的非标准属性。当你执行 this.deid.size = size 和 this.deid.timestamp = new Date().getTime() 的时候，实际上是给该数组对象添加了 size 和 timestamp 两个非标准属性。而当你将该数组对象传给 Vuex 的 mutation 方法时，vuex-persistedstate 插件会将该对象转换为一个字符串并保存到本地存储中。由于数组对象并没有 size 和 timestamp 两个标准属性，所以这些非标准属性就会丢失。

为了解决这个问题，你可以创建一个新的纯对象，将 this.deid 数组作为该对象的一个属性进行保存，并将 size 和 timestamp 属性作为该对象的标准属性进行保存。例如：

javascript复制代码

let size = 0; const deidObj = { data: this.deid, // 将原始数组保存为纯对象的某个属性 size: size, timestamp: new Date().getTime() }; this.deid.forEach((item) => { const num = parseFloat(item.size); if (!isNaN(num)) { // 判断是否为数字 size += num; } }); deidObj.size = size; // console.log(deidObj, "2"); this.$store.commit("DOLOAD_REDING", deidObj); this.recordList = this.$store.state.Download;

上述代码中，我们将 this.deid 数组作为 deidObj 对象的一个属性 data 进行保存，并将 size 和 timestamp 属性作为 deidObj 对象的标准属性进行保存。这样，在页面刷新时，vuex-persistedstate 插件就能正确地保存和读取该对象了。

需要注意的是，当你从 vuex-persistedstate 中读取数据时，得到的实际上是一个包含 data、size 和 timestamp 属性的纯对象。如果你需要使用 this.deid 数组，可以直接从该纯对象中取出 data 属性，例如：

javascript复制代码

const persistedData = JSON.parse(localStorage.getItem("vuex")); if (persistedData) { const deidObj = persistedData.doloadReading; if (deidObj && Array.isArray(deidObj.data)) { this.deid = deidObj.data; // TODO: 后续处理 ... } }