Индикатор загрузки Nuxt загружается несколько раз - PullRequest
Новая
       74

Индикатор загрузки Nuxt загружается несколько раз

0 голосов
/ 28 января 2020

Я использую панель загрузки по умолчанию, она хорошо работает на простых страницах. Но когда я использую несколько запросов ax ios, индикатор выполнения загружается каждый раз при отправке запроса. Я хочу, чтобы индикатор выполнения понимал все эти запросы как загрузку одной страницы. Я использовал Promise.all, и это отчасти сработало. Но моя проблема в том, что я использую асинхронные методы отправки vuex.

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

async fetch({  store }) {
    await store.dispatch('LOAD_DATA_1')
    await store.dispatch('LOAD_DATA_2')
    await store.dispatch('LOAD_DATA_3')
}

1 Ответ

3 голосов
/ 28 января 2020

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

Во-первых, вы захотите запретить плагину nuxt ax ios запускать полосу загрузки. Смотрите здесь . 

this.$axios.$get('URL', { progress: false })

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

this.$nuxt.$loading.start()
this.$nuxt.$loading.stop()

Полный пример: 

async fetch({  store }) {
    this.$nuxt.$loading.start()
    await store.dispatch('LOAD_DATA_1')
    await store.dispatch('LOAD_DATA_2')
    await store.dispatch('LOAD_DATA_3')
    this.$nuxt.$loading.stop()
}

edit 1 (см. комментарий):

Для использования в asyncData / fetch вы можете использовать следующее. Я не уверен, что вы должны обращаться к таким компонентам, как этот, но я не вижу другого способа доступа к модулю $ loading в контексте ... 

async fetch(ctx) {
    // access the loading component via the access context
    ctx.app.components.NuxtLoading.methods.start()

    // example, wait 3 seconds before disabling loader
    await new Promise(resolve => setTimeout(resolve, 3000))

    ctx.app.components.NuxtLoading.methods.finish()
},
...