Vue3 localStorage读取数组并赋值的问题及解决
更新时间：2025年06月16日 08:37:15 作者：不想起名55
这篇文章主要介绍了Vue3 localStorage读取数组并赋值的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
今天在写项目用到localStorage进行存储并读取数据，并将读取到的数据存放到列表的时候，发现vue3不能直接对数组进行赋值。
因为Vue3的响应式是proxy，对所有的数据进行了拦截。
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList));
});
可以看出来JSON.parse（）解析出来是一个数组，里面包含很多对象。
现在的问题变成了如何从数组中取出每个对象的值，并将它们存放到数组中。
加个数组下标，读取下标所在的对象
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList)[0]);
});
想要取其中的value值
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList)[0]._value);
});
解决方案
知道了取出一个_value的方法了，如何取出全部的？就要用到遍历了。
const keywordList = reactive([]);
onBeforeMount(() => {
let res = localStorage.keywordList;
if (res) {
for (let [index, elem] of JSON.parse(localStorage.keywordList).entries()) {
keywordList.push(elem._value)
}
} else {
keywordList = [];
}
});
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何在前端和后端实现文件传输,前端使用Vue.js发送文件,后端使用Java接收文件并处理,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
vue项目中如何排查没有使用的变量、js、css和无关文件引用等
这篇文章主要介绍了vue项目中如何排查没有使用的变量、js、css和无关文件引用等的相关资料,通过示例讲解了ESLint配置、Webpack插件使用和手动检查,以优化代码结构和资源管理,需要的朋友可以参考下2025-06-06
这篇文章主要介绍了vue/cli3版本打包如何去掉soucemap文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
Element-ui el-tree新增和删除节点后如何刷新tree的实例
这篇文章主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue 中的 render 函数作用，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
详解如何在vue项目中使用eslint+prettier格式化代码
在开发中我们需要一种能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格，这篇文章主要介绍了详解如何在vue项目中使用eslint+prettier格式化代码，需要的朋友可以参考下2018-11-11
在Vue 3中,nextTick是一个用于处理DOM异步更新的工具函数,确保在数据变化后操作最新的DOM,本文给大家介绍vue3中nextTick的作用及示例解析,感兴趣的朋友一起看看吧2025-04-04
vue3 elementPlus table实现列宽可拖拽功能
这篇文章主要介绍了vue3 elementPlus table实现列宽可拖拽功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
本文主要介绍了vue中el-table多层级嵌套的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
这篇文章主要介绍了关于全局安装vue-cli遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论