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

Question

我在我的nuxt应用程序中创建了一个博客，它从我一直跟踪这个教程的内容中提取数据，现在我可以做到这一点，但是我似乎不能同时获得上下文和环境变量，我设置了从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()的主要(第一个)参数是上下文对象。env是上下文对象的属性。您可以以context.env的形式访问它，而无需使用对象重组分配。您的示例可以通过以下方式重写，而无需使用对象重组赋值：

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，则可以使用对象重组分配以下列方式提取该属性(正如您在删除第一个参数时提到的那样：

 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作为第一个/主要参数传递给结构调整。

希望这能帮上忙！