Как отправить сообщение с index.html чтобы Vue.js 3 экземпляр?


Как отправить сообщение с index.html чтобы Vue.js 3 экземпляр?

26.10.2020 11:06:54 Просмотров 5 Источник

Итак, представьте себе 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>

Есть ли способ связаться с запущенным экземпляром Vue или/и Vuex из файла index.html? Например, я хочу показать "загрузка..." до тех пор, пока скрипт не будет полностью загружен и т. д.

  • Один из способов-отправить сообщение сервисному работнику, а затем от него-Vue, но это кажется непрактичным.

  • Другой способ-установить windows.script_status = true после инициализации, но объект window не реагирует, поэтому Vue проверит его один раз, получит undefined и забудет об этом.

  • UPD: Третий способ-это ввести скрипты со стороны Vue и поместить какую-то функцию в script.onload, чтобы получить, когда она будет готова, но не уверен, насколько стабильным будет решение.

Так что любой совет подойдет :)

У вопроса есть решение - Посмотреть?

Ответы - Как отправить сообщение с index.html чтобы Vue.js 3 экземпляр? / How to send a message from index.html to Vue.js 3 instance?

chad_

26.10.2020 11:15:21

Может быть, я неправильно понимаю, но если бы я использовал Vue, мне нравится использовать vuex, и когда я это делаю, я всегда помещаю свою функциональность доступа к API в действия в моем магазине vuex, действия запускают мутации, которые обновляют состояние, которое вы затем можете наблюдать/реагировать.

Является ответом!
sortas

26.10.2020 11:49:41

Решение было третье-ввести скрипт вручную через mounted и поместить всю логику в часть script.onload. Пример Google Maps:

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: https://stackoverflow.com/a/45605316/1598470.

Beyers

27.10.2020 12:15:11

Я бы пошел по пути внешнего концентратора событий. Поскольку Vue 3 удалил методы экземпляра $on, $off и $once, официальная стратегия миграции для концентратора событий заключается в использовании внешней библиотеки, такой как mitt. Используя, например, mitt, вы должны быть в состоянии легко сигнализировать Vue, как только ваши другие пользовательские скрипты будут загружены.

Помочь в развитии проекта:
Закрыть X