【Vue3】localStorage读取数组并赋值的问题

最新推荐文章于 2024-02-09 14:05:47 发布

不想起名55

最新推荐文章于 2024-02-09 14:05:47 发布

阅读量707

点赞数

分类专栏： Vue 文章标签： javascript vue.js ecmascript

本文链接：https://blog.youkuaiyun.com/2201_75499330/article/details/129727351

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

文章讲述了在Vue3项目中使用localStorage存储和读取数据时遇到的问题，即不能直接对数组赋值。作者介绍了如何通过JSON.parse解析数组，以及使用`reactive`和`for...of`遍历方法将localStorage中的对象值提取并存入新数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

今天在写项目用到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 = [];
  }
});

在这里插入图片描述