Question

我正在nuxt应用程序中创建一个博客，该博客一直遵循此tutorial来从内容丰富的ive中获取数据，现在我可以解决所有问题，但是我似乎无法同时获取上下文和环境变量设置为从asyncData参数返回

我已经像这样创建了一个json文件。

.contentful.json

{
  "CTF_BLOG_POST_ITEM": "...",
  "CTF_BLOG_POST": "...",
  "CTF_SPACE_ID": "...",
  "CTF_CDA_ACCESS_TOKEN":"..."
}

，然后在我的 nuxt.config.js

中

env: {
   CTF_SPACE_ID: config.CTF_SPACE_ID,
   CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
   CTF_BLOG_POST_ITEM: config.CTF_BLOG_POST_ITEM,
   CTF_BLOG_POST: config.CTF_BLOG_POST
}

现在基本上在我的组件中，我一直在尝试这样做

asyncData(context, {env}) {
    return Promise.all([
        client.getEntries({
            'content_type': env.CTF_BLOG_POST_ITEM,
            order: '-sys.createdAt'
        })
    ]).then(([posts]) => {
        console.log(context);
        return {
            posts: posts.items
        }
    })
},

但是当我运行它时，我得到cannot read property CTF_BLOG_POST_ITEM of undefined，如果我从参数中删除上下文，这是可行的，反之亦然，如果我使用{env}，则得到上下文。

我怎么都能得到？

谢谢

Answer 1

asyncData()的主要（第一）参数是context object。 env是上下文对象的属性。您可以以context.env的身份访问它，而无需使用object restructuring assignment。您的示例可以按以下方式重写，而无需使用对象重组分配：

asyncData(context) {
    return Promise.all([
        client.getEntries({
            'content_type': context.env.CTF_BLOG_POST_ITEM,
            order: '-sys.createdAt'
        })
    ]).then(([posts]) => {
        console.log(context);
        console.log(context.env);
        return {
            posts: posts.items
        }
    })
},

签名asyncData(context, {env}) {不正确，因为您要添加第二个参数{env}，该参数不以任何方式引用上述上下文对象。如果您只需要env中的context，则可以使用object restructuring assignment通过以下方式提取此属性（如您提到的删除第一个参数的方法：

 asyncData({env}) {
    return Promise.all([
        client.getEntries({
            'content_type': context.env.CTF_BLOG_POST_ITEM,
            order: '-sys.createdAt'
        })
    ]).then(([posts]) => {
        console.log(context);
        console.log(context.env);
        return {
            posts: posts.items
        }
    })
},

如果需要其他上下文对象属性，请使用对象分解分配。 Tt看起来像：

asyncData({env, params, req, res}) {

否则，您可以通过简单地传递context.env作为重组的第一个/主要参数来访问context.params，context等属性。

希望有帮助！

如何在asyncData nuxtjs中获取上下文和环境变量

1 个答案: