Обнаружение vue компонентов fini sh рендеринга

Question

На одной из страниц моего сайта есть ряд вызовов API, которые приносят данные для компонентов диаграммы AmCharts. Пока возвращаются вызовы API, я установил флаг isLoading на этой странице, чтобы он показывал загрузочный счетчик. И когда вызов API завершен, я изменяю значение isLoading на false, поэтому графики затем обрабатываются.

Но все же на странице возникает значительная задержка, когда isLoading изменяется на false, показывая белый цвет на несколько секунд или более, прежде чем появятся диаграммы.

Вот фрагмент кода.

data() {
  return {
    isLoading: true
  }
},

mounted() {
  await API_calling();

  this.$nextTick(() => {
    this.isLoading = false;
  }
}

Я считаю, что эта задержка связана с временем рендеринга AmCharts, и я хочу установить isLoading значение равно false, когда все графики заканчиваются sh рендерингом.

Итак, мой вопрос к stackoverflow, как я могу определить момент, когда vue компоненты заканчивают sh рендеринг?

Answer 1

Если вы говорите о загрузке нескольких компонентов одновременно, то лучшим вариантом будет использование vuex.

Вы можете сохранить в vuex 2 значения: isLoading и countLoadingComponents.

Вы можете увеличить countLoadingComponents в начале created() метода каждого компонента и уменьшить countLoadingComponents, когда вызов API в этом компоненте завершен.

Создать watcher для состояния countLoadingComponents в главном компоненте. Если countLoadingComponents равно 0, измените состояние isLoading на false.