Вы разработали приложение Vue и вам нужно знать, подключен ли пользователь к Интернету, а также когда соединение потеряно и восстановлено. Вот быстрый и простой способ сделать это.
Перед тем как начать, вот несколько вещей, которые вам нужно знать об этом руководстве:
- Код доступен на Github https://github.com/kannieWeesNie/connectionApp.
- Я использовал Vue cli 3 для создания проекта. Вы можете проверить документацию здесь, https://cli.vuejs.org/guide/creating-a-project.html#vue-create, чтобы узнать, как это сделать.
- Я использовал этот подход в реальном живом приложении, которое вы можете увидеть здесь https://www.istimuli.com/. Вы можете протестировать его, включив или отключив подключение к Интернету.
Вот как я это сделал.
Шаг 1
Я создал новый проект Vue, который включал библиотеки Vuex и Router.
Шаг 2
Я создал две функции и сохранил их в файле в папке с ресурсами.
Браузер подключен?
Первая функция использует обещание, чтобы проверить, подключен ли браузер пользователя. Результат возвращается в обратном вызове. Вам не нужно использовать обещание, я использовал его только потому, что не хотел, чтобы основной поток блокировался во время установки приложения.
Изменилось ли соединение?
Вторая функция регистрирует слушателей, чтобы проверять, когда меняется онлайн-статус. Обратный вызов возвращает истину или ложь при каждом изменении соединения.
Шаг 3
Я создал хранилище Vuex для хранения состояния объекта isInternetConnected. Это единственный источник достоверной информации для приложения, который будет обновляться каждый раз при изменении состояния подключения к Интернету. После этого мы сможем получить это значение в любом месте приложения, чтобы узнать текущее состояние подключения к Интернету.
Я создал мутацию setIsInternetConnected, чтобы установить состояние объекта isInternetConnected при изменении состояния подключения к Интернету, и геттер getIsInternetConnected, чтобы получить сохраненное состояние подключения к Интернету.
Все изменения в подключении к Интернету отслеживаются в корневом компоненте App.vue. Любое изменение сохраняется в магазине.
Затем мы можем использовать геттер getIsInternetConnected, чтобы в любое время получить текущее состояние подключения к браузеру в любом компоненте. Это всегда будет последнее состояние подключения к браузеру.
Шаг 4
Корневой компонент App.vue.
Я отредактировал компонент App.vue и импортировал две указанные выше функции.
Объект onlineState
Я также создал объект данных onlineState, который мы используем в шаблоне App.vue вместе с блоком v-if / else для отображения текста онлайн или офлайн. Эта версия объекта onlineState уникальна для этого компонента. Хотя я использовал одно и то же имя для объекта данных в компоненте «О программе», они не связаны между собой.
Шаблон App.vue
App.vue - это корневой компонент. Мы используем маршрутизатор для навигации между компонентами. Любой HTML-код в компоненте приложения будет отображаться во всех включенных компонентах.
Хук жизненного цикла created ()
Затем я создал ловушку жизненного цикла Vue created (), которая запускается сразу после создания экземпляра vue. Здесь мы сначала вызываем нашу функцию isConnected (), чтобы проверить, подключен ли браузер к Интернету. Мы получаем результат в обратном вызове и устанавливаем это значение для объекта данных onlineState. Мы также сохраняем это значение в нашем магазине, вызывая setIsInternetConnected, чтобы установить состояние нашего сохраненного объекта isInternetConnected.
Слушатели
Затем я зарегистрировал слушателей для прослушивания изменений подключения к Интернету, вызвав функцию listenForInternetChanges (). Каждый раз, когда изменяется подключение к Интернету, обратный вызов этой функции будет возвращать онлайн-состояние браузеров. Мы используем этот результат для установки объекта данных onlineState компонентов App.vue. Так же сохраняем новое состояние в нашем магазине.
Наблюдатель
Я включил наблюдатель для просмотра объекта данных onlineState. Это будет срабатывать каждый раз при изменении состояния подключения к Интернету. Здесь мы устанавливаем значение объекта onlineState наших компонентов приложения в новое состояние и отображаем предупреждение.
Обратите внимание, что предупреждение останавливает весь код до тех пор, пока он не будет отклонен, поэтому я использовал setTimeout (), чтобы отложить предупреждение, чтобы остальная часть кода могла выполняться без задержки.
Затем давайте уведомим другие компоненты об изменении подключения к Интернету.
About.vue
Компонент About.vue отображает текст, указывающий, подключен ли браузер к Интернету или нет. Он использует значение объекта данных onlineState, уникальное для этого компонента. Мы используем его и блок v-if / else для отображения текста онлайн или офлайн.
Магазин
Я импортировал mapGetters магазинов из vuex. Получатель getIsInternetConnected в вычисляемой функции mapGetters () вызывается в функции connected () о компонентах.
Крючок жизненного цикла mount ()
Функция mount () запускается, когда компонент монтируется. Здесь мы получаем текущее состояние интернет-соединения из магазина, вызывая метод получения getIsInternetConnected. Мы используем его значение для установки объекта данных onlineState компонентов.
Наблюдатель
Наконец, у нас есть наблюдатель для просмотра getIsInternetConnected. Это срабатывает каждый раз, когда изменяется состояние интернет-соединения. Когда это происходит, мы устанавливаем объект данных onlineState для компонента About, который, в свою очередь, переключает отображаемый текст онлайн / офлайн.
Резюме
Корневой компонент App.vue отслеживает подключение к Интернету и обновляет статус в магазине. Каждый компонент получает текущий статус соединения из хранилища и использует это значение вместе с блоком v-if / else для отображения соответствующего текстового сообщения.
Таким образом, каждый раз при изменении подключения к Интернету корневой компонент отображает предупреждающее сообщение, а также текстовый индикатор (который также будет отображаться в компоненте «О программе»), а компонент «О программе» отображает соответствующий текстовый индикатор (включенный или автономный).
Тестирование
Вы можете проверить, работает ли оно, запустив приложение на локальном хосте и включив и отключив подключение к Интернету.
Если вы используете Chrome, откройте Инструменты разработчика и выберите вкладку Сеть. Установите и снимите флажок Автономный режим во время навигации по вашему приложению, и вы должны увидеть изменение предупреждений и текстовых сообщений.
Надеюсь, вы нашли этот урок полезным
