Возможно ли промежуточное ПО Nuxt дождаться разрешения запросов asyncData? - PullRequest
Новая
       45

Возможно ли промежуточное ПО Nuxt дождаться разрешения запросов asyncData?

0 голосов
/ 14 октября 2019

У меня в приложении Nuxt есть промежуточное ПО, которое закрывает полноэкранное мобильное меню при нажатии на новый маршрут. Я испытываю следующее:

  1. пользователь нажимает nuxt-ссылку
  2. закрытие меню
  3. asyncData delay (по-прежнему показывает текущую страницу)
  4. новая страница загружается при разрешении asyncData

Что мне нужно, это следующее:

  1. пользователь нажимает nuxt-ссылку
  2. задержка asyncData (если существует)
  3. меню закрывается при загрузке новой страницы

Возможно ли иметь наблюдатель asyncData в промежуточном программном обеспечении Nuxt?

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

Примечание. Не каждая страница использует asyncData.

Ответы [ 2 ]

3 голосов
/ 14 октября 2019

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

0 голосов
/ 15 октября 2019

Я понял это в более элегантном решении, чем реализация функции store.dispatch для каждой отдельной функции asyncData.

Итак, я использовал пользовательский компонент загрузки: https://nuxtjs.org/api/configuration-loading/#using-a-custom-loading-component

Однако вместо того, чтобы показывать индикатор выполнения или какую-либо анимацию загрузки, я просто использовал этот компонент, чтобы установить состояние загрузки в моем хранилище vuex. Обратите внимание - это заставляет вас иметь шаблон, но я просто навсегда отключил его. 

<template>
  <div v-if="false"></div>
</template>

<script>
  export default {
    methods: {
      start() {
        this.$store.dispatch('updateLoadingStatus', true);
      },
      finish() {
        this.$store.dispatch('updateLoadingStatus', false);
      }
    }
  };
</script>

Затем в своем промежуточном программном обеспечении я настроил средство отслеживания интервалов, чтобы проверять, остановилась ли загрузка. Когда он остановлен, я останавливаю интервал и закрываю мобильное меню. 

export default function({ store }) {

  if (store.state.page.mobileNav) {
    if (store.state.page.loading) {

      var watcher = setInterval(() => {
        if (!store.state.page.loading) {
          store.dispatch('updateMobileNav', false);
          clearInterval(watcher);
        }
      }, 100);

    } else {
      store.dispatch('updateMobileNav', false);
    }
  }
}

Это не обязательно должно быть для открытия / закрытия мобильного меню. Он может использоваться для всего в промежуточном программном обеспечении, которому нужно дождаться разрешения asyncData. Надеюсь, что это может помочь любому в будущем!

...