typescript - NuxtJS - Usar el método asyncData en el layout o componente

¿Cómo puedo usar asyncData en un layout o componente (aparentemente prohibido)?

Porque mi componente de barra lateral se usa en el diseño predeterminado, y necesito usar asyncData para mostrar datos del backend. Y si uso Vuex para obtener datos... no sé cómo puedo obtener esto de manera global en cada página.

Mi anotación del componente de diseño:

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

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

Respuesta #1

fetch y asyncData funcionan solo para páginas, como se indica en la documentación. Si necesitas algo para obtener datos en cada página, usa nuxtServerInit

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

Respuesta #2

El nuevo fetch en Nuxt >= 2.12 ahora soporta la obtención en el nivel de layout y component.

En este momento está ligeramente roto para mí a nivel de layout en mi sitio generado estáticamente, así que uso fetchOnServer: false. Para cuando otras personas lean esto, con suerte estará arreglado, así que siéntete libre de eliminar esto.

Aquí hay algo de material de lectura útil :)

Documentos

Guía general

Guía para sitios estáticos