Узнайте, как использовать обработчик жизненного цикла mount () для загрузки настроек
В веб-приложении иногда нам нужно загрузить данные с сервера перед загрузкой интерфейсного приложения. например, мы должны загрузить специфичные для среды настройки до загрузки интерфейсной страницы, чтобы мы могли извлекать необходимые файлы в зависимости от среды. В большинстве случаев ваша начальная страница загрузки или домашняя страница зависит от этих данных. Если у вас нет данных, вы не сможете загрузить страницу. Мы можем очень часто сталкиваться с подобными сценариями.
Например, представьте сценарий, в котором вам нужно показать предпочтения пользователя на целевой странице, и вам нужно получить эти предпочтения с сервера, поскольку у каждого пользователя могут быть разные предпочтения в зависимости от их истории. В этом посте мы увидим, как мы можем использовать перехватчик жизненного цикла mount () для получения данных в приложениях Vue.
- Предварительные требования
- Пример проекта
- Что такое подключенный крючок жизненного цикла?
- Использование подключенного хука для получения настроек
- Демо
- Резюме
- Заключение
Предпосылки
Есть некоторые предварительные условия для этой статьи. У вас должен быть установлен nodejs на вашем ноутбуке и ноу-хау Http работает. Если вы хотите попрактиковаться и запустить это на своем ноутбуке, вам необходимо иметь их на своем компьютере.
Пример проекта
Это простой проект, демонстрирующий разработку и запуск приложения Vue с помощью NodeJS. У нас есть простое приложение, в котором мы можем добавлять пользователей, подсчитывать и отображать их сбоку, а также извлекать их, когда захотите.
По мере того, как вы добавляете пользователей, мы делаем вызов API на сервер nodejs, чтобы хранить их и получать те же данные с сервера, когда мы их извлекаем. Вы можете увидеть сетевые вызовы в следующем видео.
Вот ссылка на этот проект на Github. Вы можете клонировать его и запустить на своем компьютере.
// clone the project git clone https://github.com/bbachi/vuejs-nodejs-example.git // strat the api cd api npm install npm run dev // start the react app cd my-app npm install npm run serve
Что такое подключенный крючок жизненного цикла?
У нас так много методов жизненного цикла, которые можно вызывать в разное время при рендеринге компонентов Vue. Установленный обработчик жизненного цикла вызывается сразу после загрузки компонента.
Вы можете определить подключенный обработчик жизненного цикла в компоненте, как показано ниже.
Использование подключенного хука для получения настроек
Давайте разберемся, что мы получаем, прежде чем загружать страницу. Если вы посмотрите на файл сервера API NodeJS, у нас есть данные пользователя в строке номер 8. Когда мы загружаем страницу, нам нужно получить пользователей и отобразить исходные данные в таблице пользователя.
Теперь нам нужно нажать кнопку getUsers, чтобы получить этих пользователей. Мы не получаем пользователей, пока страница загружается.
Давайте воспользуемся обработчиком жизненного цикла mounted()
, чтобы получить пользователей, как показано ниже. В этой ловушке мы используем службу для получения пользователей путем вызова метода getUsers (), который вызывает API с помощью fetch API.
Нам также необходимо использовать это условие, чтобы отобразить таблицу, в которой доступен только пользовательский массив.
Вот полный файл панели инструментов.
Демо
Вот демонстрация того, что мы получаем данные с сервера, а затем загружаем домашнюю страницу.
Резюме
- В веб-приложении иногда нам нужно загрузить данные с сервера перед загрузкой интерфейсного приложения.
- Мы должны загрузить специфичные для среды настройки до загрузки интерфейсной страницы, чтобы мы могли извлекать необходимые файлы в зависимости от среды.
- Представьте себе сценарий, в котором вам нужно отобразить предпочтения пользователя на целевой странице, и вам нужно получить эти предпочтения с сервера, поскольку у каждого пользователя могут быть разные предпочтения в зависимости от их истории.
- Хуки жизненного цикла Vue позволяют выполнять некоторые действия в зависимости от состояния рендеринга компонента Vue.
Заключение
С помощью комбинации подключенного хука жизненного цикла mounted()
и оператора if мы можем получить настройки перед загрузкой приложения Vue.