在 Vue3 应用程序中分发数据的最有效方法是什么?
P粉413307845
P粉413307845 2024-03-26 15:19:42
0
1
485

是否有推荐的方法来通过 vue 组件传播数据?我想做的是从后端 once 获取数据并将其传播到我的项目中的各个位置,但我找不到正确的策略。

sessionStorage:效果很好,会在刷新/关闭窗口时重置,但一旦您需要创建 target="_blank" 锚标记,它就不会将您的数据传播到新选项卡。

localStorage:我认为比 sessionStorage 需要更多的工作,因为您需要手动删除数据以保持整洁。对我来说一个大问题是,看起来你无法正确传递 markdownarrays ,至少没有 stringify 。我已经使用 localStorage 构建了一个项目,并最终从我的大多数组件发送 ajax 请求 ,因为我无法按照我想要的方式通过我的应用程序传播数据。此时我的frontendbackend

我个人对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 来实现我的目的的好处。也许我会再试一次。

如何通过应用传播数据?

P粉413307845
P粉413307845

全部回复(1)
P粉022140576

有一些很好的论据来解释为什么 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 更容易、更直观。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板