Nuxt中间件是否可以等待asyncData请求解决？

Question

我的Nuxt应用程序中有一些中间件，当单击新路线时，该中间件会关闭全屏移动菜单。我正在体验以下内容：

1. 用户点击链接
2. 菜单关闭
3. asyncData延迟（仍显示当前页面）
4. 新页面在解析后的asyncData上加载

我想要以下是：

1. 用户点击链接
2. asyncData延迟（如果存在）
3. 菜单在新页面加载时关闭

在Nuxt中间件中可以有一个asyncData监视程序吗？

[我知道我可以通过创建一个跟踪asyncData负载的存储值来解决这个问题，但是我宁愿不必将这样一个凌乱的解决方案连接到每个使用asyncData的页面上。

注意-并非每个页面都使用asyncData。

Answer 1

我认为最好的选择是使菜单保持打开状态，然后在新页面完成加载时（可能在已安装的挂钩上）发送事件或操作以关闭菜单。

Answer 2

我想出了一个比必须在每个单独的asyncData函数上实现store.dispatch函数更优雅的解决方案。

所以我要做的是使用自定义加载组件：https://nuxtjs.org/api/configuration-loading/#using-a-custom-loading-component

但是，我没有显示进度条或任何类型的加载动画，而是仅使用此组件在vuex存储中设置了加载状态。注意-它强迫您使用模板，但我只是永久禁用它。

<template>
  <div v-if="false"></div>
</template>

<script>
  export default {
    methods: {
      start() {
        this.$store.dispatch('updateLoadingStatus', true);
      },
      finish() {
        this.$store.dispatch('updateLoadingStatus', false);
      }
    }
  };
</script> 

然后，在我的中间件中，我设置了一个时间间隔监视程序来检查何时停止加载。停止后，我停止间隔并关闭移动菜单。

export default function({ store }) {

  if (store.state.page.mobileNav) {
    if (store.state.page.loading) {

      var watcher = setInterval(() => {
        if (!store.state.page.loading) {
          store.dispatch('updateMobileNav', false);
          clearInterval(watcher);
        }
      }, 100);

    } else {
      store.dispatch('updateMobileNav', false);
    }
  }
}

对于移动菜单的打开/关闭，这不是必须的。它可以用于中间件中需要等待asyncData解析的任何事物。希望这可以对以后的任何人有所帮助！