Управлять вызовами API при использовании vuex
В настоящее время я работаю над менеджером активов для сетевой/серверной инфраструктуры в vue.js.
Я также использую vuetify для внешнего вида, поскольку целью является создание прогрессивного веб-приложения. Инженеры могут использовать свой телефон для сканирования меток на активах компании, чтобы запросить подробности.
В настоящее время все данные загружаются в приложение с помощью остальных API. Я использую vuex для управления состоянием в приложении.
Я хотел бы получить некоторое представление о том, когда запускать эти запросы API.
Итак, есть некоторые данные, которые я в настоящее время загружаю в начале веб-приложения сразу после входа в систему, когда загружается основное основное представление. Это влияет на производительность. Некоторые примеры загруженных данных: -> типы активов, продавцы, поставщики,... Эти данные используются во многих местах приложения. (формы, фильтры,...) Я предпочитаю не вызывать действия vuex для выполнения формы запроса API внутри определенного компонента, так как это может привести к ненужному запросу при просмотре приложения. Единственным исключением из этого являются сами активы, так как это много данных для загрузки в начале.
Проблема, с которой я сталкиваюсь, заключается в том, что на мобильных платформах загрузка данных каждый раз при запуске приложения является пустой тратой соединения для передачи данных. Вполне возможно, что инженер использует приложение, фактически не нуждаясь в данных.
Я знаю, что это своего рода абстрактный вопрос, я не ищу последний ответ. Просто некоторые идеи или рекомендации от сообщества.
Ответы 1
Поправьте меня, если я неправильно понял, но похоже, что вы предварительно загружаете много некритической информации при запуске. Вы должны действительно сосредоточиться на том, когда эти данные действительно нужны, и обращаться и извлекать их только тогда, когда они действительно нужны. Распространенным случаем этого является изменение маршрута, поэтому, если у вас есть несколько страниц в вашем приложении, странице администратора, вероятно, потребуются данные, которые не нужны вашему домашнему экрану. Подождите, пока вы не перейдете на эту страницу, прежде чем получить информацию, относящуюся к этой странице. Обычно это делается с помощью beforeRouteEnter хука маршрутизатора или created хука жизненного цикла. Теперь, чтобы развить это, может потребоваться некоторое время для загрузки этих новых данных после изменения маршрута — страница может отображаться до того, как все необходимые данные будут доступны. Вы можете использовать такую библиотеку, как Vue-обещано, для обработки этого промежуточного состояния для разделов, которым требуются данные, которые все еще загружаются. Это позволяет быстро отображать страницу, не дожидаясь всех ее данных.
Еще пара советов по дальнейшей оптимизации:
- Если ваши данные не меняются часто, иногда не помешает сохранить эти данные в браузере, либо используя HTTP-заголовок Cache-Control при совершении ваших http-вызовов, либо используя что-то вроде браузеров Локальное хранилище или один из методов жесткого сохранения, доступных в браузер. Есть ряд плагинов Vuex, которые делают это действительно простым, например. vuex-сохраняется. При запуске вы можете загрузить эти данные из хранилища, что быстрее, чем выполнение сетевого вызова, ваше приложение сможет реагировать быстрее, и вы даже можете пойти и сделать этот сетевой запрос в фоновом режиме, чтобы обновить эти данные после отображения страницы.
- Если получение больших наборов данных является проблемой, вы можете разбить данные на страницы, чтобы получить их меньшими порциями, и извлекать дополнительные «страницы» для данных только тогда, когда они нужны пользователю. В таблицах это обычно делается с помощью кнопок пагинации или бесконечная прокрутка. Существует ряд библиотек, которые также выполняют обе эти функции, разбиение на страницы, вероятно, будет встроено в компонент таблицы библиотек vuetify.
Большое спасибо за ответ, некоторые вещи, такие как pagina для API, уже реализованы, но есть много вещей, которые действительно полезны!