Индикатор выполнения загрузки Nuxt загружается несколько раз
Я использую панель загрузки nuxt по умолчанию, она хорошо работает на простых страницах. Но когда я использую несколько запросов axios, индикатор выполнения загружается каждый раз, когда запрос отправляется. Я хочу, чтобы индикатор выполнения понимал все эти запросы как загрузку одной страницы. Я обещаю.все и это вроде как работало. Но моя проблема заключается в том, что я использую асинхронные методы отправки vuex.
Итак, мой код выглядит примерно так: три разных асинхронных диспетчера и индикатор выполнения загружаются три раза. Как я могу сделать так, чтобы он заряжался только один раз. Спасибо
async fetch({ store }) {
await store.dispatch('LOAD_DATA_1')
await store.dispatch('LOAD_DATA_2')
await store.dispatch('LOAD_DATA_3')
}
Ответы - Индикатор выполнения загрузки Nuxt загружается несколько раз / Nuxt loading progress bar loads multiple times
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()
},