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

Question

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

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

我的布局组件注释：

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

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

Answer 1

fetch 和 asyncData 仅适用于页面，如 documentation. If you need something to get data on each page, use nuxtServerInit

中所述

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

Answer 2

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

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

这里有一些有用的读物 material :)

Docs

General guide

Guide for static sites

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

NuxtJS - Use asyncData method in layout or component

typescript

vue.js

vue-component

nuxt.js

asyncdata

我的布局组件注释：