是否有推薦的方法來通過 vue 組件傳播數(shù)據(jù)?我想做的是從后端 once
獲取數(shù)據(jù)并將其傳播到我的項(xiàng)目中的各個(gè)位置,但我找不到正確的策略。
sessionStorage:效果很好,會(huì)在刷新/關(guān)閉窗口時(shí)重置,但一旦您需要?jiǎng)?chuàng)建 target="_blank"
錨標(biāo)記,它就不會(huì)將您的數(shù)據(jù)傳播到新選項(xiàng)卡。 p>
localStorage:我認(rèn)為比 sessionStorage
需要更多的工作,因?yàn)槟枰謩?dòng)刪除數(shù)據(jù)以保持整潔。對我來說一個(gè)大問題是,看起來你無法正確傳遞 markdown
和 arrays
,至少?zèng)]有 stringify
。我已經(jīng)使用 localStorage
構(gòu)建了一個(gè)項(xiàng)目,并最終從我的大多數(shù)組件發(fā)送 ajax 請求
,因?yàn)槲覠o法按照我想要的方式通過我的應(yīng)用程序傳播數(shù)據(jù)。此時(shí)我的frontend
是backend
。
我個(gè)人對localStorage
的問題:我使用marked
包來顯示Markdown
,但如果傳遞undefined
,它會(huì)拋出錯(cuò)誤。當(dāng)我想在 reactive 狀態(tài)
中使用它時(shí),這會(huì)出現(xiàn)問題,因?yàn)樗粫?huì)導(dǎo)致 undefined
,而是引發(fā)錯(cuò)誤并使整個(gè)應(yīng)用程序崩潰。我想說的是,當(dāng)您將 undefined localStorage 值
傳遞給 marked
中的 either 或 field
時(shí),如下所示:
const state = reactive({ value: marked(localStorage.value) || "" })
如果 localStorage.value
為空,它會(huì)使您的應(yīng)用程序崩潰。
另一個(gè)問題是我根據(jù) locale
獲取文本內(nèi)容并將其存儲(chǔ)在 localStorage
中。這很好,直到用戶更改 locale
并且所有內(nèi)容字符串都必須替換為翻譯后的字符串。如果我想使用一個(gè)組件作為模板來加載不同的語言環(huán)境,這會(huì)變得非常棘手。
vuex:我很快就嘗試了 vuex
并發(fā)現(xiàn)它很有用,但沒有看到比僅使用 localStorage
來實(shí)現(xiàn)我的目的的好處。也許我會(huì)再試一次。
如何通過應(yīng)用傳播數(shù)據(jù)?
有一些很好的論據(jù)來解釋為什么 Vuex 比本地存儲(chǔ)更好:
您還可以嘗試可組合項(xiàng)。它們是composition-api中可重用的函數(shù)(類似于mixins)(在vue2中需要composition-api插件,在vue3中它是內(nèi)置的)。它也可以是您存儲(chǔ)數(shù)據(jù)的地方。它比 Vuex 更容易、更直觀。