Nuxt加载进度条加载多次

Question

我正在使用默认的 nuxt 加载栏，它在简单的页面上运行良好。但是当我使用多个 axios 请求时，每次发送请求时都会加载进度条。我希望进度条将所有这些请求理解为单个页面加载。我使用了 Promise.all 并且它有点工作。但我的问题是我使用的是异步 vuex 调度方法。

所以我的代码是这样的，三个不同的异步调度和进度条加载了 3 次。我怎样才能让它只加载一次。谢谢

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

Answer 1

它加载了三个不同的时间，因为您的请求是按顺序发生的，一个接一个，而不是一次。为了解决这个问题，您可以手动启动/停止加载程序。

首先，您需要防止 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()
},