vue.js - 组件中的 Nuxt 内容异步获取

Question

我是@nuxt/content模块的新手，它运行良好，除了在 components中。

在这里，我试图获得这样的内容：

布局.vue

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

组件.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
  },
}