Question

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

用户单击nuxt-link
菜单关闭
asyncData延迟（仍显示当前页面）
在解析的asyncData上加载新页面

我想要的是以下内容：

用户单击nuxt-link
asyncData延迟（如果存在）
菜单在新页面加载时关闭

在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解析的任何事物。希望以后能对任何人有帮助！

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

2 个答案: