javascript - 在 Vue.js 应用程序中使用自定义 JavaScript 代码

Question

我正在尝试在 Vue.js 路由器应用程序中插入 JavaScript 代码。我需要从提供应用程序的 CMS 加载数据。为了从 CMS 获取数据，我必须使用 CMS 中的 JavaScript 库，该库不是为 Vue 制作的，也不会像现代 JS 那样导出它的类/函数。所以我通过脚本标签从 index.html 中导入 JS 库。这按预期工作。
但现在我必须使用这个 CMS JavaScript 库中的类。
在将其编写为 Vue-Router 应用程序之前，我只是将 Vue 用于模板目的。
所以我在 window.onload 事件处理程序中打包了一些代码。
我必须为 CMS 数据访问类创建一个实例。
但这会导致构建错误(使用 vue-cli build)。从那里
构建过程中没有可理解的错误消息
我必须使用反复试验。甚至像 var a = 1 这样的简单变量赋值似乎不允许。
console.log('something') 有效。但似乎不允许其他任何事情(除了定义 onload-event 处理程序)
我已将此代码添加到 <script> App.vue 中的标签(由 vue-cli create 创建)

window.onload = function() {
    
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
}

更新
在从答案中测试了不同的解决方案后，我意识到使用非实例变量似乎会导致构建错误。
这给出了一个错误:

        waitForPlayerData = true;

这有效:

        this.waitForPlayerData = true;

Answer 1

我不建议使用 window.load运行您的代码。在 Vue.js 中有更多的本地方法可以做到这一点。
如果您想在加载之前在应用程序的主要组件中运行它，您应该将代码放在 beforeCreate 中。主要组件的生命周期钩子(Hook)。

...
beforeCreate () {
  this.cmsDataLoader()
},
methods: {
  cmsDataLoader () {
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
  }
}
...

这将在每次创建组件时运行代码 之前 创作。您也可以使用 created如果你想运行生命周期钩子(Hook) 之后 组件的创建。
查看以下链接以获取有关 lifecycle hooks 的更多信息.