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

问题描述

如何在布局或组件中使用 asyncData(显然被禁止)?

How I can use asyncData in layout or component (forbidden apparently) ?

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

Because my sidebar component is used in default layout, and I need to use asyncData to display data from backend.And if I use Vuex to fetch data... I don't know how I can fetch this with global on every page.

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

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

推荐答案

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

fetch and asyncData works only for pages, as it stated in documentation. If you need something to get data on each page, use nuxtServerInit

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

这篇关于NuxtJS - 在布局或组件中使用 asyncData 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！