Was ist der effizienteste Weg, Daten in einer Vue3-Anwendung zu verteilen?

Question

Gibt es eine empfohlene Möglichkeit, Daten über Vue-Komponenten weiterzugeben? Ich möchte die Daten vom Backend abrufen once und sie an verschiedene Stellen in meinem Projekt weitergeben, aber ich finde nicht die richtige Strategie.

sessionStorage: Funktioniert hervorragend und wird beim Aktualisieren/Schließen des Fensters zurückgesetzt, aber Ihre Daten werden nicht auf die neue Registerkarte übertragen, sobald Sie das target="_blank"-Ankertag erstellen müssen.

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

Meine persönliche Meinung zu localStorage的问题：我使用marked包来显示Markdown，但如果传递undefined，它会抛出错误。当我想在 reactive 状态 中使用它时，这会出现问题，因为它不会导致 undefined ，而是引发错误并使整个应用程序崩溃。我想说的是，当您将 undefined localStorage 值 传递给 marked 中的 either 或 field ist wie folgt:

const state = reactive({
    value: marked(localStorage.value) || ""
})

Wenn localStorage.value leer ist, stürzt Ihre Anwendung ab.

Ein weiteres Problem besteht darin, dass ich den Inhalt auf locale 获取文本内容并将其存储在 localStorage 中。这很好，直到用户更改 locale basiere und alle Inhaltszeichenfolgen durch übersetzte Zeichenfolgen ersetzt werden müssen. Das wird wirklich schwierig, wenn ich eine Komponente als Vorlage zum Laden verschiedener Gebietsschemas verwenden möchte.

vuex: Ich habe schnell versucht vuex 并发现它很有用，但没有看到比仅使用 localStorage, die Vorteile für meine Zwecke zu erreichen. Vielleicht versuche ich es noch einmal.

Wie werden Daten über die Anwendung verbreitet?

Answer 1

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