NuxtJS - 在布局或组件中使用 asyncData 方法

Question

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

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

我的布局组件注释：

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

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

Answer 1

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

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

Answer 2

新版本fetch现在支持在和级别Nuxt >= 2.12上获取。layoutcomponent

现在，它对我来说在layout静态生成的网站级别上稍微有点问题，所以我使用fetchOnServer: false. 当未来的人们读到这篇文章时，它有望得到修复，所以请随意编辑它。

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

文档

一般指南

静态站点指南