Nuxt 加载进度条加载多次答案

【问题标题】：Nuxt loading progress bar loads multiple timesNuxt 加载进度条加载多次
【发布时间】：2020-05-13 08:00:47
【问题描述】：

我正在使用默认的 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')
}

【问题讨论】：

你试过promise.all吗？
它适用于简单的 axios get 方法，但我不知道如何在调度方法上使用 promise.all。你有什么建议吗？

标签： vue.js vuex nuxt.js

【解决方案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()
},

【讨论】：

非常感谢。进展：假工作。我通过 $axios.onRequest 全局创建了插件并禁用了进度变量。还有一个问题。你知道如何在 fetch 方法中使用 this.$nuxt.$loading.start/finish 吗？ fetch 和 asyncData 方法中没有 this.$nuxt。
我已经编辑了我的回复@ShotoAzikuri。我不确定这是访问 $loading 模块的最佳方式，但我也看不到从应用程序上下文中获取它的另一种方式。让我知道这是否有效，如果有效，请接受答案:)
即使没有手动启动和完成加载程序也可以工作。我认为这是因为 fetch 方法在路由更改后运行，并且路由更改会自动触发加载。非常感谢您的帮助。