【问题标题】：NuxtJS - Use asyncData method in layout or componentNuxtJS - 在布局或组件中使用 asyncData 方法
【发布时间】：2020-01-31 23:05:02
【问题描述】：

如何在布局或组件中使用asyncData（显然是禁止的）？

因为我的侧边栏组件在默认布局中使用，我需要使用asyncData 来显示来自后端的数据。如果我使用 Vuex 来获取数据......我不知道如何在每个页面上使用 global 来获取它。

我的布局组件注解：

  @Component({
    components: {
      LeftDrawer
    },
    async asyncData({ app }) {
      const latestPosts = await app.$axios.get(`/posts/latest`);

      return {
        latestPosts: latestPosts.data,
      };
    }
  })

【问题讨论】：

标签： typescript vue.js vue-component nuxt.js asyncdata

【解决方案1】：

fetch 和 asyncData 仅适用于页面，如 documentation 中所述。如果您需要在每个页面上获取数据，请使用nuxtServerInit

actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}

【讨论】：

【解决方案2】：

Nuxt >= 2.12 上的新 fetch 现在支持在 layout 和 component 级别上获取。

现在，我的静态生成网站的layout 级别对我来说有点破，所以我使用fetchOnServer: false。到将来人们阅读此内容时，它有望得到修复，因此请随时编辑此内容。

这里有一些有用的阅读材料:)

Docs

General guide

Guide for static sites

【讨论】：

当我在 Nuxt 配置中与 target: "static" 结合使用时，我也注意到了 async fetch() 的问题。 fetchOnServer: false 修复了我的某些组件的问题，但是当应用于其他组件时，它会破坏我的构建...仍在进行故障排除。
提出另一个堆栈溢出问题并标记我，我会看看我是否能看到明显的东西。如果没有，您可能需要在 Github 上发布问题。
我的同事找到的我们当前的解决方案是做created() { this.$fetch(); } 我问他这个问题，他的理论是在服务器中mounted() 直到created() 完成后才会运行。由于我们在创建的生命周期方法中调用了 fetch API，所以当挂载的生命周期方法运行时，数据将可用。 QA 通过了，所以我假设这个方法适用于我们在构建时获取 yaml 翻译文件的用例。
很高兴你让它工作了，仍然值得提出一个 Github 问题，以便他们可以解决这个问题或将它添加到文档中。祝你项目的其余部分好运:)