使用VueJS和Nuxt.JS拉取满意的数据

Question

好的，我想使用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”的内容。

Answer 1

你用的是nuxt还是"Vanilla Vue"？您提到的这些id是在nuxt.config.js文件中读取的，该文件是nuxt的主要配置文件。Nuxt run的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
  }
  // ...
}

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

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 (这可以进行重构以避免重复，但这是另一个主题)，然后通过env在页面组件中访问它，以使用getEntries查询数据。

希望这能有所帮助。:)