使用 VueJS 和 Nuxt.JS 提取内容数据答案

【问题标题】：Pulling Contentful data using VueJS and Nuxt.JS使用 VueJS 和 Nuxt.JS 提取内容数据
【发布时间】：2019-02-09 13:34:09
【问题描述】：

好的，我想使用 VueJS 从 Contentful 中提取数据（现有数据）。

我不是开发人员，所以我真的不明白它是如何完全工作的，我能够完成their tutorial 的一半，但由于我已经有了我的空间和数据，所以我被卡住了，教程坚持博客类型，从未真正提及如何提取具有不同结构的数据。

根据教程，我必须创建一个包含

的 .contentful.json

{
  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
  "CTF_BLOG_POST_TYPE_ID": "blogPost",
  "CTF_SPACE_ID": "YOUR_SPACE_ID",
  "CTF_CDA_ACCESS_TOKEN": "YOUR_ACCESS_TOKEN"
}

除了他们作为模板提供的数据之外，他们没有提到我如何提取其他数据。

我想知道的： 1.如果我有自己的空间，而不是从模板中，我如何或在哪里可以找到类似于“CTF_PERSON_ID”和“CTF_BLOG_POST_TYPE_ID”的东西。

【问题讨论】：

标签： vue.js nuxt.js contentful

【解决方案1】：

您使用的是 nuxt 还是“Vanilla Vue”？您提到的这些 id 在 nuxt.config.js 文件中读取，该文件是 nuxt 的主要配置文件。 Nuxt 在服务器端和客户端运行 javascript，这就是为什么它需要知道配置参数是什么。

// ./nuxt.config.js
const config = require('./.contentful.json')

module.exports = {
  // ...
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  }
  // ...
}

nuxt.config 对象中的env 属性在页面组件（pages/index.vue 或pages/blog/index.vue）中被读取。

const client = createClient()
export default {
  asyncData ({ env, params }) {
    return client.getEntries({
      'content_type': env.CTF_BLOG_POST_TYPE_ID,
      order: '-sys.createdAt'
    }).then(entries => {
      return {
        posts: entries.items
      }
    })
  },
  components: {
    ArticlePreview,
    Navigation
  }
}

如果您有不同的结构，您可以在配置文件 (.contentful.json) 中添加一个新的内容类型 ID，并将其添加到 nuxt.config.js 中的 env（可以对其进行重组以避免重复，但这是不同的topic)，然后在页面组件中通过env访问，使用getEntries查询数据。

希望对您有所帮助。 :)

【讨论】：