Vue3?localStorage讀取數(shù)組并賦值的問題及解決
更新時(shí)間：2025年06月16日 08:37:15 作者：不想起名55
這篇文章主要介紹了Vue3?localStorage讀取數(shù)組并賦值的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問題描述
今天在寫項(xiàng)目用到localStorage進(jìn)行存儲(chǔ)并讀取數(shù)據(jù)，并將讀取到的數(shù)據(jù)存放到列表的時(shí)候，發(fā)現(xiàn)vue3不能直接對(duì)數(shù)組進(jìn)行賦值。
因?yàn)閂ue3的響應(yīng)式是proxy，對(duì)所有的數(shù)據(jù)進(jìn)行了攔截。
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList));
});
可以看出來JSON.parse（）解析出來是一個(gè)數(shù)組，里面包含很多對(duì)象。
現(xiàn)在的問題變成了如何從數(shù)組中取出每個(gè)對(duì)象的值，并將它們存放到數(shù)組中。
加個(gè)數(shù)組下標(biāo)，讀取下標(biāo)所在的對(duì)象
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList)[0]);
});
想要取其中的value值
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList)[0]._value);
});
解決方案
知道了取出一個(gè)_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 = [];
}
});
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能
這篇文章主要介紹了使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue3?setup中父組件通過Ref調(diào)用子組件的方法(實(shí)例代碼)
這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vite+vue3項(xiàng)目中使用SVG方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue高級(jí)特性的相關(guān)知識(shí)，文中介紹非常細(xì)致，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作
這篇文章主要介紹了VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue項(xiàng)目WebPack打包刪除注釋和console
這篇文章主要介紹了Vue項(xiàng)目WebPack打包刪除注釋和console，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue中使用Day.js時(shí)間轉(zhuǎn)化插件詳細(xì)教程(附Vue2與Vue3寫法)
Day.js是一個(gè)極簡(jiǎn)的JavaScript庫(kù),可以為現(xiàn)代瀏覽器解析、驗(yàn)證、操作和顯示日期和時(shí)間,這篇文章主要介紹了Vue中使用Day.js時(shí)間轉(zhuǎn)化插件的相關(guān)資料,需要的朋友可以參考下2025-05-05
解析Vue2 dist 目錄下各個(gè)文件的區(qū)別
本篇文章主要介紹了解析Vue2 dist 目錄下各個(gè)文件的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11