是否有推荐的方法来通过 vue 组件传播数据?我想做的是从后端 once
获取数据并将其传播到我的项目中的各个位置,但我找不到正确的策略。
sessionStorage:效果很好,会在刷新/关闭窗口时重置,但一旦您需要创建 target="_blank"
锚标记,它就不会将您的数据传播到新选项卡。 p>
localStorage:我认为比 sessionStorage
需要更多的工作,因为您需要手动删除数据以保持整洁。对我来说一个大问题是,看起来你无法正确传递 markdown
和 arrays
,至少没有 stringify
。我已经使用 localStorage
构建了一个项目,并最终从我的大多数组件发送 ajax 请求
,因为我无法按照我想要的方式通过我的应用程序传播数据。此时我的frontend
是backend
。
我个人对localStorage
的问题:我使用marked
包来显示Markdown
,但如果传递undefined
,它会抛出错误。当我想在 reactive 状态
中使用它时,这会出现问题,因为它不会导致 undefined
,而是引发错误并使整个应用程序崩溃。我想说的是,当您将 undefined localStorage 值
传递给 marked
中的 either 或 field
时,如下所示:
const state = reactive({ value: marked(localStorage.value) || "" })
如果 localStorage.value
为空,它会使您的应用程序崩溃。
另一个问题是我根据 locale
获取文本内容并将其存储在 localStorage
中。这很好,直到用户更改 locale
并且所有内容字符串都必须替换为翻译后的字符串。如果我想使用一个组件作为模板来加载不同的语言环境,这会变得非常棘手。
vuex:我很快就尝试了 vuex
并发现它很有用,但没有看到比仅使用 localStorage
来实现我的目的的好处。也许我会再试一次。
如何通过应用传播数据?
有一些很好的论据来解释为什么 Vuex 比本地存储更好:
https://www.quora.com/What-is-the-benefit-of-using-Vuex-over-LocalStorage-to-store-the-state-of -Vue-js 中的应用程序
您还可以尝试可组合项。它们是composition-api中可重用的函数(类似于mixins)(在vue2中需要composition-api插件,在vue3中它是内置的)。它也可以是您存储数据的地方。它比 Vuex 更容易、更直观。