управлять вызовами API при использовании Vuex

Question

В настоящее время я работаю над менеджером ресурсов для сетевой / серверной инфраструктуры в vue.js.

Я также использую vuetify для внешнего вида, поскольку цель состоит в создании прогрессивного веб-приложения.Инженеры могут использовать свой телефон для сканирования тегов на активах компании для запроса деталей.

В настоящее время все данные загружаются в приложение с помощью API остальных.Я использую vuex для управления состоянием в приложении.

Я хотел бы получить некоторые сведения о том, когда следует запускать эти запросы API.

Итак, есть некоторые данные, которые я в данный момент загружаю в начале веб-приложения сразу после входа в систему, когда отображается основное ядро.загружен.Это влияет на производительность.Некоторые примеры загруженных данных: -> типы активов, поставщики, поставщики, ... Эти данные используются во многих местах приложения.(формы, фильтры, ...) Я предпочитаю не вызывать действия vuex для выполнения формы запроса API внутри определенного компонента, поскольку это может привести к ненужному запросу при просмотре приложения.Единственное исключение - это сами активы, так как это много данных для загрузки в начале.

Проблема, с которой я сталкиваюсь, заключается в том, что на мобильных платформах загрузка данных каждый раз при запуске приложенияэто трата соединения данных.Вполне возможно, что инженер использует приложение, фактически не требуя данных.

Я знаю, что это своего рода абстрактный вопрос, я не ищу окончательного awnser.Просто некоторые идеи или рекомендации сообщества.

Answer 1

Поправьте меня, если я неправильно понял, но звучит так, будто вы предварительно загружаете много некритической информации при запуске. Вы должны сосредоточиться на том, когда эти данные действительно необходимы, и обращаться к ним и извлекать их только тогда, когда они действительно необходимы. Типичным случаем этого является изменение маршрута, поэтому, если у вас есть несколько страниц в вашем приложении, страница администратора может нуждаться в данных, которые не нужны вашему домашнему экрану. Подождите, пока вы перейдете на эту страницу, прежде чем получать информацию, относящуюся к этой странице. Обычно это делается в хуке роутера beforeRouteEnter или хуке жизненного цикла created. Теперь, чтобы развить это, может потребоваться некоторое время для загрузки этих новых данных после изменения маршрута - страница может отобразиться до того, как все необходимые данные станут доступны. Вы можете использовать библиотеку типа Vue-Promised для обработки этого промежуточного состояния для разделов, которые требуют данных, которые все еще загружаются. Это позволяет быстро отображать страницу, не дожидаясь всех своих данных.

Пара других советов по дальнейшей оптимизации:

• Если ваши данные не часто меняются, иногда не помешает сохранить эти данные в браузере, используя либо HTTP-заголовок Cache-Control при совершении http-вызовов, либо с помощью чего-либо например, браузеры LocalStorage или один из методов жесткого сохранения, доступных в браузере. Theres несколько плагинов Vuex, которые делают это действительно легко, напр. vuex-упорствовать . При запуске вы можете загрузить эти данные из хранилища, что быстрее, чем совершать сетевой вызов, ваше приложение сможет отвечать быстрее, и вы даже можете пойти и сделать этот сетевой запрос в фоновом режиме, чтобы обновить эти данные после отображения страницы.
• Если извлечение больших наборов данных является проблемой, то вы можете разбить данные на страницы для извлечения их небольшими порциями и извлекать дополнительные «страницы» для данных только тогда, когда это необходимо пользователю. В таблицах это обычно делается с помощью кнопок нумерации страниц или бесконечная прокрутка . В связи с тем, что есть несколько библиотек, которые выполняют обе эти функции, разбиение на страницы, вероятно, будет встроено в компонент таблицы библиотек vuetify.