组件中的 Nuxt 内容异步获取

Question

我是@nuxt/content module 的新手，除了在组件内之外，它运行良好。

我在这里尝试获取这样的内容：

layout.vue

export default {
  name: 'Default',
  CONTENT: 'content',
  async asyncData({ $content }) {
    const content = await $content('content').fetch()
    return { content }
  },
}

component.vue

export default {
  async fetch({ $content }) {
    this.content = await this.$content('content', { deep: true }).fetch()
  },
  data() {
    return { content }
  },
}

如何在组件中使用内容？

Answer 1

所以，$content 没有理由不能在组件中工作，我仔细检查了。这就是 fetch 与 asyncData 相比的工作方式。

您可以在此处阅读有关差异的更多信息：https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/#asyncdata-vs-fetch

但是当使用fetch 钩子时，它归结为不同的语法，如下所示：

export default {
  data() {
    return {
      content: [],
    }
  },
  async fetch({ $content }) {
    this.content = await $content('content', { deep: true }).fetch()
    // ! it's $content and not this.$content here since you've imported it in the scope
  },
}