在 Vuejs3 中从 div data-* 属性设置全局变量

【问题标题】：Set a global variable from div data-* attribute in Vuejs3在 Vuejs3 中从 div data-* 属性设置全局变量
【发布时间】：2021-07-31 09:07:09
【问题描述】：

我正在制作一个像这样实例化的 vue3 应用程序：

<div id="my-app" data-string="demo"></div>
<script src=my-app.js></script>

我需要将data-string 的值设置为我的所有组件都可以访问的全局变量，或者一种干净地获取此值并将其传递给我的所有组件的方法。我正在使用带有 Typescript 的 Vue 3。我已经尝试了几件事，但无法弄清楚。任何帮助将非常感激。谢谢！

【问题讨论】：

【解决方案1】：

要完成它，您可以这样做

获取值first

const globalScopeValue = document.getElementById('my-app').dataset.string

在你创建你的 Vue 应用程序之前！

然后在你的 App.vue（主组件）中使用 Provide。

然后在您需要此globalScopeValue 的所有其他组件中使用 Inject。

【讨论】：

嗨亚当，当我尝试时，这第一条语句返回未定义。我在我的 main.ts 和我的 App.vue 主组件文件中进行了尝试。提供/注入的东西看起来不错！第一部分有什么想法吗？
尝试等到窗口加载，然后从dataset 获取data，然后触发vue app。让我知道这是否有帮助?