Nuxt加载进度条多次加载

Question

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

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

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插件触发加载栏。参见here。

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