Nuxt 3 `asyncData` 函数无法用于获取博客详细信息

Question

我的 Nuxt 3 应用程序中的 asyncData 函数遇到问题。我正在尝试从我的 CMS 获取并映射博客详细信息，但该功能似乎未按预期工作。

这是 asyncData 函数的代码：

    export async function asyncData({ params }) {
        function getCustomDate(passedDate) {
            const date = new Date(passedDate);
            let year = date.getFullYear();
            const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            let month = months[date.getMonth()];
            let dt = date.getDate();

            let newDate = `${dt} ${month}, ${year}`
            return newDate
        }

        var response = await client.getEntries({
            content_type: 'blog',
            'fields.slug': route.params.slug
        });
        let blog = response.items;

        blog = blog.map((item) => {
            let renderOptions = {
                renderNode: {
                    [BLOCKS.EMBEDDED_ENTRY]: (node, children) => {
                        if (node.data.target.sys.contentType.sys.id === "codeBlock") {
                            return `<pre>
                                <code>${node.data.target.fields.code}</code>
                            </pre>`;
                        }

                        if (node.data.target.sys.contentType.sys.id === "videoEmbed") {
                            return `<iframe
                                src='${node.data.target.fields.embedUrl}'
                                height='100%'
                                width='100%'
                                frameBorder='0'
                                scrolling='no'
                                title='${node.data.target.fields.title}'
                                allowFullScreen=true
                            />`;
                        }
                    },
                    [INLINES.HYPERLINK]: (node, next) => {
                        if (node.data.uri.includes("player.vimeo.com/video")) {
                            return `<div class="iframe-container">
                                <iframe
                                title="${next(node.content)}"
                                src="${node.data.uri}"
                                frameBorder='0'
                                allowFullScreen
                                ></iframe>
                            </div>`;
                        } else if (node.data.uri.includes("youtube.com/embed")) {
                            return `<div class="iframe-container">
                                <iframe
                                title="${next(node.content)}"
                                src="${node.data.uri}"
                                allow='accelerometer; encrypted-media; gyroscope; picture-in-picture'
                                frameBorder='0'
                                allowFullScreen
                                ></iframe>
                            </div>`;
                        } else {
                            return `<span class="color">
                            <a href="${node.data.uri}">${next(node.content)}</a>
                            </span>`;
                        }
                    },
                    [BLOCKS.EMBEDDED_ASSET]: (node, children) => {
                        return `<div class="content-img"><img
                            src="https:${node.data.target.fields.file.url}"
                            width='100%'
                            alt="${node.data.target.fields.description}"
                            /></div>`;
                    },
                },
            }

            const { id, createdAt } = item.sys;
            const { title, description } = item.fields;
            const featuredImage = item.fields.featuredImage.fields.file.url
            const content = item.fields.details;
            const details = documentToHtmlString(content, renderOptions)
            const customDate = getCustomDate(createdAt)

            return{
                id, title, featuredImage, description, details, createdAt, customDate
            }
        })
        return {
            blogDetails: blog
        };
    }

需要注意的几点：

我已导入必要的依赖项（客户端、documentToHtmlString、BLOCKS 和 INLINES）并在我的脚本中可用。 client.getEntries 是一个从我的 CMS 获取数据的函数，它适用于我的应用程序的其他部分。 问题似乎在于异步函数本身，因为数据没有被填充。

Answer 1

asyncData 是 Nuxt 保留函数。您实际上应该使用哪个。 尝试使用 nuxt 的 asyncData / useFetch 来解决您的问题。 使用 Fetch - Nuxt 文档。

我建议查看示例并从那里开始。 对于 Vue/Nuxt 开发人员来说，您的代码片段看起来有点疯狂。