组件中的 Nuxt Content 异步获取

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
  },
}

组件中的 Nuxt Content 异步获取

Nuxt Content async fetch in component

vue.js

nuxt.js

nuxt-content