Узнайте, как использовать обработчик жизненного цикла 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.