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

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

28.01.2020 01:17:56 Просмотров 41 Источник

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

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

async fetch({  store }) {
    await store.dispatch('LOAD_DATA_1')
    await store.dispatch('LOAD_DATA_2')
    await store.dispatch('LOAD_DATA_3')
}
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59939694/nuxt-loading-progress-bar-loads-multiple-times#comment106016705_59939694
Это работало на простых методах Axios get, но я не мог понять, как использовать promise.все по методам отправки. У вас есть какие-нибудь предложения?

Ответы - Индикатор выполнения загрузки Nuxt загружается несколько раз / Nuxt loading progress bar loads multiple times

Является ответом!
Jake

28.01.2020 05:06:19

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

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

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()
}

правка 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()
},
https://stackoverflow.com/questions/59939694/nuxt-loading-progress-bar-loads-multiple-times/59941303#comment106016747_59941303
Большое спасибо. прогресс: ложь сработала. Я создал плагин и отключил переменную прогресса глобально через $axios.по запросу. Еще один вопрос. У вас есть какие-нибудь идеи, как это использовать?$nuxt.$погрузка.старт / финиш внутри метода выборки. Этого нет.$nuxt внутри методов fetch и asyncData.
https://stackoverflow.com/questions/59939694/nuxt-loading-progress-bar-loads-multiple-times/59941303#comment106016815_59941303
А также мне пришлось обновить модуль nuxt axios.
https://stackoverflow.com/questions/59939694/nuxt-loading-progress-bar-loads-multiple-times/59941303#comment106023975_59941303
Я отредактировал свой ответ @ShotoAzikuri. Я не уверен, что это лучший способ получить доступ к модулю $loading, но я также не вижу другого способа добраться до него из контекста приложения. Дайте мне знать, если это сработает, и примите ответ, если да :)
https://stackoverflow.com/questions/59939694/nuxt-loading-progress-bar-loads-multiple-times/59941303#comment106033602_59941303
Он работает даже без ручного запуска и отделки погрузчика. Я думаю, это потому, что метод fetch запускается после изменения маршрута, а изменение маршрута автоматически запускает загрузку. Большое вам спасибо за помощь.
Помочь в развитии проекта:
Закрыть X