如何从 index.html 发送消息到 Vue.js 3 实例？

Question

所以，想象一下 Vue index.html 也加载了一些自定义脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    ...
    <script type="text/javascript">
    languagePluginLoader.then(function () {
        pyodide.loadPackage("someName").then(() => {
            // Send message to Vue that everything is fine
        }).catch((err) => {
            // Send message to Vue that it failed
        })
    })
    </script>
    ...
    ...
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

有没有办法从 index.html 文件与运行 Vue 实例 or/and Vuex 通信？例如，我想显示“正在加载...”直到脚本完全加载等

一种方式是将消息发送给service worker，然后再从service worker发送给vue，但是感觉不切实际。
另一种方式是在初始化后设置windows.script_status = true，但是window对象不是响应式的，所以Vue会检查一次，得到undefined并忘记关于它。
UPD：第三种方法是从 Vue 端注入脚本并将一些函数放入 script.onload 以获取准备就绪的时间，但不确定解决方案的稳定性。

所以，任何建议都行:)

Answer 1

解决方案是第三个 - 通过 mounted 手动注入脚本并将所有逻辑放入 script.onload 部分。 Google 地图示例：

mounted: function () {
    if (window.google && window.google.maps) {
        this.create_map();
        return;
    }

    var self = this;
    var script = document.createElement("script");
    script.onload = function () {
        if (!window.google && !window.google.maps)
            return void (console.error("no google maps script included"));

        self.create_map();
    };

    script.async = true;
    script.defer = true;
    script.src = "https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap";
    document.getElementsByTagName("head")[0].appendChild(script);
}

从另一个 SO 问题的答案中选择逻辑：。

Answer 2

我会走外部事件中心的路线。由于 Vue 3 移除了 $on、$off 和 $once 实例方法，官方 migration strategy for an event hub is to use an external library, such as mitt。使用例如一旦加载了其他自定义脚本，您应该能够轻松地向 Vue 发出信号。

如何从 index.html 发送消息到 Vue.js 3 实例？

How to send a message from index.html to Vue.js 3 instance?

html

javascript

vue.js

vuex

pyodide