[{"data":1,"prerenderedAt":7939},["ShallowReactive",2],{"docs-all-flat":3,"docs-\u002Fdocs\u002Fgetting-started\u002Fdata-fetching":1018},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,352,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,667,671,675,679,683,687,691,695,699,703,707,711,715,719,723,727,731,735,739,743,747,751,755,759,763,767,770,774,778,782,786,790,794,798,802,806,809,813,817,821,825,829,833,837,841,845,849,852,855,859,863,867,871,874,877,881,884,888,892,895,898,901,904,907,911,915,918,922,926,930,934,938,942,946,950,954,958,962,966,970,974,978,982,986,990,994,998,1002,1006,1010,1014],{"path":5,"title":6,"description":7},"\u002Fdocs\u002Fgetting-started\u002Fintroduction","介绍","Nuxt 的目标是提供直观且高性能的 Web 开发体验，并始终将优秀的开发者体验（Developer Experience）放在心上。",{"path":9,"title":10,"description":11},"\u002Fdocs\u002Fgetting-started\u002Finstallation","安装","通过在线 starter 快速上手 Nuxt，或在本地使用终端从零开始。",{"path":13,"title":14,"description":15},"\u002Fdocs\u002Fgetting-started\u002Fconfiguration","配置","Nuxt 提供了合理的默认配置，让你高效开发。",{"path":17,"title":18,"description":19},"\u002Fdocs\u002Fgetting-started\u002Fviews","视图","Nuxt 提供了多个组件层来实现应用的用户界面。",{"path":21,"title":22,"description":23},"\u002Fdocs\u002Fgetting-started\u002Fassets","资源","Nuxt 为你的资源提供了两种处理方式。",{"path":25,"title":26,"description":27},"\u002Fdocs\u002Fgetting-started\u002Fstyling","样式","了解如何为你的 Nuxt 应用添加样式。",{"path":29,"title":30,"description":31},"\u002Fdocs\u002Fgetting-started\u002Frouting","路由","Nuxt 的文件系统路由会为 pages\u002F 目录中的每个文件创建一条路由。",{"path":33,"title":34,"description":35},"\u002Fdocs\u002Fgetting-started\u002Fseo-meta","SEO 与 Meta","借助强大的 head 配置、composables 和组件，改善你的 Nuxt 应用的 SEO。",{"path":37,"title":38,"description":39},"\u002Fdocs\u002Fgetting-started\u002Ftransitions","过渡","使用 Vue 或浏览器原生的 View Transitions，在页面和布局之间应用过渡效果。",{"path":41,"title":42,"description":43},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching","数据获取","Nuxt 提供了用于处理应用内数据获取的 composables。",{"path":45,"title":46,"description":47},"\u002Fdocs\u002Fgetting-started\u002Fstate-management","状态管理","Nuxt 提供了强大的状态管理库和 useState composable，用于创建响应式且对 SSR 友好的共享状态。",{"path":49,"title":50,"description":51},"\u002Fdocs\u002Fgetting-started\u002Ferror-handling","错误处理","了解如何在 Nuxt 中捕获和处理错误。",{"path":53,"title":54,"description":55},"\u002Fdocs\u002Fgetting-started\u002Fserver","Server","利用 Nuxt 的服务端框架构建全栈应用。你可以从数据库或其他服务端获取数据、创建 API，甚至生成像站点地图或 RSS 这样的静态服务端内容——全部来自同一个代码库。",{"path":57,"title":58,"description":59},"\u002Fdocs\u002Fgetting-started\u002Flayers","Layers","Nuxt 提供了一套强大的系统，允许你扩展默认文件、配置以及更多内容。",{"path":61,"title":62,"description":63},"\u002Fdocs\u002Fgetting-started\u002Fprerendering","Prerendering","Nuxt 允许在构建时静态渲染某些页面，以改善特定的性能或 SEO 指标。",{"path":65,"title":66,"description":67},"\u002Fdocs\u002Fgetting-started\u002Fdeployment","Deployment","了解如何将你的 Nuxt 应用部署到任何托管提供商。",{"path":69,"title":70,"description":71},"\u002Fdocs\u002Fgetting-started\u002Ftesting","Testing","如何测试你的 Nuxt 应用。",{"path":73,"title":74,"description":75},"\u002Fdocs\u002Fgetting-started\u002Fupgrade","Upgrade Guide","了解如何升级到最新的 Nuxt 版本。",{"path":77,"title":78,"description":79},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt",".nuxt","Nuxt 在开发阶段使用 .nuxt\u002F 目录来生成你的 Vue 应用。",{"path":81,"title":82,"description":83},"\u002Fdocs\u002Fdirectory-structure\u002Foutput",".output","Nuxt 在为生产环境构建应用时创建 .output\u002F 目录。",{"path":85,"title":86,"description":87},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fassets","assets","assets\u002F 目录用于添加所有将由构建工具处理的网站资源。",{"path":89,"title":90,"description":91},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents","components","components\u002F 目录用于存放你所有的 Vue 组件。",{"path":93,"title":94,"description":95},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomposables","composables","使用 composables\u002F 目录将你的 Vue 组合式函数自动导入到应用中。",{"path":97,"title":98,"description":99},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Flayouts","layouts","Nuxt 提供了一个布局框架，用于将通用的 UI 模式提取为可复用的布局。",{"path":101,"title":102,"description":103},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fmiddleware","middleware","Nuxt 提供中间件，用于在导航到特定路由前运行代码。",{"path":105,"title":106,"description":107},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fpages","pages","Nuxt 提供基于文件的路由，用于在 Web 应用中创建路由。",{"path":109,"title":110,"description":111},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fplugins","plugins","Nuxt 拥有一个插件系统，用于在创建 Vue 应用时使用 Vue 插件等。",{"path":113,"title":114,"description":115},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Futils","utils","使用 utils\u002F 目录在你的应用中自动导入工具函数。",{"path":117,"title":118,"description":119},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp","app.vue","app.vue 文件是你 Nuxt 应用的主组件。",{"path":121,"title":122,"description":123},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp-config","app.config.ts","使用 App Config 文件在应用内部暴露响应式配置。",{"path":125,"title":126,"description":127},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Ferror","error.vue","error.vue 文件是你 Nuxt 应用中的错误页面。",{"path":129,"title":130,"description":131},"\u002Fdocs\u002Fdirectory-structure\u002Fcontent","content","使用 content\u002F 目录为你的应用创建一个基于文件的 CMS。",{"path":133,"title":134,"description":135},"\u002Fdocs\u002Fdirectory-structure\u002Flayers","layers","使用 layers\u002F 目录在你的应用中组织和自动注册本地 layers。",{"path":137,"title":138,"description":139},"\u002Fdocs\u002Fdirectory-structure\u002Fmodules","modules","使用 modules\u002F 目录在你的应用中自动注册本地模块。",{"path":141,"title":142,"description":143},"\u002Fdocs\u002Fdirectory-structure\u002Fnode_modules","node_modules","包管理器将项目的依赖存储在 node_modules\u002F 目录中。",{"path":145,"title":146,"description":147},"\u002Fdocs\u002Fdirectory-structure\u002Fpublic","public","public\u002F 目录用于提供网站的静态资源。",{"path":149,"title":150,"description":151},"\u002Fdocs\u002Fdirectory-structure\u002Fserver","server","server\u002F 目录用于为你的应用注册 API 和服务端处理器。",{"path":153,"title":154,"description":155},"\u002Fdocs\u002Fdirectory-structure\u002Fshared","shared","使用 shared\u002F 目录在 Vue 应用和 Nitro 服务端之间共享功能。",{"path":157,"title":158,"description":159},"\u002Fdocs\u002Fdirectory-structure\u002Fenv",".env",".env 文件用于指定构建\u002F开发时的环境变量。",{"path":161,"title":162,"description":163},"\u002Fdocs\u002Fdirectory-structure\u002Fgitignore",".gitignore",".gitignore 文件用于指定 git 应当忽略的、有意不跟踪的文件。",{"path":165,"title":166,"description":167},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtignore",".nuxtignore",".nuxtignore 文件用于让 Nuxt 在构建阶段忽略项目根目录中的文件。",{"path":169,"title":170,"description":171},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtrc",".nuxtrc",".nuxtrc 文件允许你用扁平语法定义 Nuxt 配置。",{"path":173,"title":174,"description":175},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt-config","nuxt.config.ts","只需要一个 nuxt.config 文件，即可轻松配置 Nuxt。",{"path":177,"title":178,"description":179},"\u002Fdocs\u002Fdirectory-structure\u002Fpackage","package.json","package.json 文件包含你应用的所有依赖和脚本。",{"path":181,"title":182,"description":183},"\u002Fdocs\u002Fdirectory-structure\u002Ftsconfig","tsconfig.json","了解 Nuxt 如何在项目的不同部分管理 TypeScript 配置。",{"path":185,"title":186,"description":187},"\u002Fdocs\u002Fdirectory-structure","Nuxt 目录结构","了解 Nuxt 应用的目录结构以及如何使用它。",{"path":189,"title":190,"description":191},"\u002Fdocs\u002Fguide","Nuxt 指南","通过深入的指南了解 Nuxt 的工作原理。",{"path":193,"title":194,"description":195},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering","渲染模式","了解 Nuxt 中可用的不同渲染模式。",{"path":197,"title":198,"description":199},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fvuejs-development","Vue.js 开发","Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由以及支持 SSR 的组合式函数等特性。",{"path":201,"title":202,"description":203},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","Nuxt 生命周期","理解 Nuxt 应用的生命周期，可以帮助你更深入地了解框架是如何运作的，尤其是在服务端渲染和客户端渲染两方面。",{"path":205,"title":206,"description":207},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fauto-imports","自动导入","Nuxt 会自动导入组件、组合式函数、辅助函数和 Vue API。",{"path":209,"title":210,"description":211},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fserver-engine","服务端引擎","Nuxt 由一个全新的服务端引擎驱动：Nitro。",{"path":213,"title":214,"description":215},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fmodules","模块","Nuxt 提供了一个模块系统来扩展框架核心并简化集成。",{"path":217,"title":218,"description":219},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fesm","ES 模块","Nuxt 使用原生的 ES 模块。",{"path":221,"title":222,"description":223},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Ftypescript","TypeScript","Nuxt 完全类型化，并提供了有用的快捷方式，确保你在编码时能获取准确的类型信息。",{"path":225,"title":226,"description":227},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fcode-style","代码风格","Nuxt 开箱即用地支持 ESLint",{"path":229,"title":230,"description":231},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fdevcontainers","Dev Containers","在开发容器中设置或打开 Nuxt 项目，以获得一致开发环境。",{"path":233,"title":234,"description":235},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fhydration","Nuxt and Hydration","为什么修复水合问题很重要",{"path":237,"title":238,"description":239},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fperformance","Nuxt performance","提升 Nuxt 应用性能的最佳实践。",{"path":241,"title":242,"description":243},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fplugins","Nuxt Plugins","使用 Nuxt 插件时的最佳实践。",{"path":245,"title":246,"description":247},"\u002Fdocs\u002Fguide\u002Fai\u002Fmcp","Nuxt MCP Server","借助 Model Context Protocol 支持，在你的 AI 助手中使用 Nuxt 文档。",{"path":249,"title":250,"description":251},"\u002Fdocs\u002Fguide\u002Fai\u002Fllms-txt","Nuxt LLMs.txt","如何让 Cursor、Windsurf、GitHub Copilot、ChatGPT 和 Claude 等 AI 工具理解 Nuxt 的概念、API 和最佳实践。",{"path":253,"title":254,"description":255},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fgetting-started","创建你的第一个模块","学习如何使用官方启动模板创建你的第一个 Nuxt 模块。",{"path":257,"title":258,"description":259},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-anatomy","理解模块结构","学习 Nuxt 模块是如何构成的，以及如何定义它们。",{"path":261,"title":262,"description":263},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-basics","添加插件、组件等","学习如何从你的模块注入插件、组件、组合式函数和服务端路由。",{"path":265,"title":266,"description":267},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-dependencies","模块依赖","声明对其它模块的依赖，并带有版本约束和配置合并。",{"path":269,"title":270,"description":271},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-advanced","使用钩子与扩展类型","在你的模块中掌握生命周期钩子、虚拟文件和 TypeScript 声明。",{"path":273,"title":274,"description":275},"\u002Fdocs\u002Fguide\u002Fmodules\u002Ftesting","测试你的模块","学习如何对你的 Nuxt 模块进行单元、集成和 E2E 测试。",{"path":277,"title":278,"description":279},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fbest-practices","遵循最佳实践","使用这些指南构建高性能且可维护的 Nuxt 模块。",{"path":281,"title":282,"description":283},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fecosystem","发布与分享你的模块","加入 Nuxt 模块生态，并将你的模块发布到 npm。",{"path":285,"title":286,"description":287},"\u002Fdocs\u002Fguide\u002Fmodules","Module Author Guide","学习如何创建 Nuxt 模块，以集成、增强或扩展任意 Nuxt 应用。",{"path":289,"title":290,"description":291},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-routing","自定义路由","在 Nuxt 中，你的路由由 pages 目录内文件的结构定义。不过，由于底层使用了 vue-router，Nuxt 提供了几种在你的项目中添加自定义路由的方式。",{"path":293,"title":294,"description":295},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fvite-plugin","在 Nuxt 中使用 Vite 插件","学习如何将 Vite 插件集成到你的 Nuxt 项目中。",{"path":297,"title":298,"description":299},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-usefetch","Nuxt 中的自定义 useFetch","如何在 Nuxt 中创建用于调用你外部 API 的自定义 fetcher。",{"path":301,"title":302,"description":303},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","会话与鉴权","鉴权是 Web 应用中极其常见的需求。本配方将向你展示如何在你的 Nuxt 应用中实现基本的用户注册与鉴权。",{"path":305,"title":306,"description":307},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fevents","创建自定义事件","Nuxt 提供了一个由 hookable 驱动的强大事件系统。",{"path":309,"title":310,"description":311},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features","实验性特性","启用 Nuxt 实验性特性以解锁新的可能性。",{"path":313,"title":314,"description":315},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Ffeatures","特性开关","启用或禁用可选的 Nuxt 特性，以解锁新的可能性。",{"path":317,"title":318,"description":319},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Finternals","Nuxt 是如何工作的？","Nuxt 是一个极简但高度可定制的框架，用于构建 Web 应用。",{"path":321,"title":322,"description":323},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fruntime-config","运行时配置","Nuxt 提供了一套运行时配置 API，以在你的应用内暴露配置和密钥。",{"path":325,"title":326,"description":327},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","Nightly 发布通道","nightly 发布通道允许使用直接从仓库最新提交构建的 Nuxt。",{"path":329,"title":330,"description":331},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fhooks","生命周期钩子","Nuxt 提供了一个强大的钩子系统，可使用钩子扩展几乎每个方面。",{"path":333,"title":334,"description":335},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fkit","Nuxt Kit","@nuxt\u002Fkit 提供了面向模块作者的功能。",{"path":337,"title":338,"description":339},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnuxt-app","NuxtApp","在 Nuxt 中，你可以在组合式函数、组件和插件中访问运行时应用上下文。",{"path":341,"title":342,"description":343},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Flayers","编写 Nuxt Layers","Nuxt 提供了一个强大的系统，允许你扩展默认文件、配置等等。",{"path":345,"title":346,"description":347},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fbuilders","创建 Builder","了解 Nuxt builder 是如何工作的，以及如何编写你自己的 builder。",{"path":349,"title":350,"description":351},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fdebugging","调试","在 Nuxt 中，你可以直接在浏览器中以及你的 IDE 里开始调试你的应用。",{"path":353,"title":354,"description":354},"\u002Fdocs\u002Fguide\u002Fgoing-further","",{"path":356,"title":357,"description":358},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fclient-only","\u003CClientOnly>","使用 \u003CClientOnly> 组件仅在客户端渲染组件。",{"path":360,"title":361,"description":362},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fdev-only","\u003CDevOnly>","使用 \u003CDevOnly> 组件仅在开发期间渲染组件。",{"path":364,"title":365,"description":366},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","\u003CNuxtClientFallback>","Nuxt 提供了 \u003CNuxtClientFallback> 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容",{"path":368,"title":369,"description":370},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-picture","\u003CNuxtPicture>","Nuxt 提供了 \u003CNuxtPicture> 组件来处理自动图像优化。",{"path":372,"title":373,"description":374},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fteleports","\u003CTeleport>","\u003CTeleport> 组件将组件传送到 DOM 中的另一个位置。",{"path":376,"title":377,"description":378},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","\u003CNuxtRouteAnnouncer>","\u003CNuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素，用于向辅助技术播报路由变化。",{"path":380,"title":381,"description":382},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-time","\u003CNuxtTime>","\u003CNuxtTime> 组件以本地化友好的格式显示时间，并保持服务端-客户端一致。",{"path":384,"title":385,"description":386},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-announcer","\u003CNuxtAnnouncer>","\u003CNuxtAnnouncer> 组件添加一个隐藏元素，用于向辅助技术播报动态内容变化。",{"path":388,"title":389,"description":390},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-page","\u003CNuxtPage>","\u003CNuxtPage> 组件用于显示位于 pages\u002F 目录中的页面。",{"path":392,"title":393,"description":394},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-layout","\u003CNuxtLayout>","Nuxt 提供了 \u003CNuxtLayout> 组件，用于在页面和错误页面上显示布局。",{"path":396,"title":397,"description":398},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link","\u003CNuxtLink>","Nuxt 提供了 \u003CNuxtLink> 组件来处理应用内的各类链接。",{"path":400,"title":401,"description":402},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","\u003CNuxtLoadingIndicator>","在页面导航之间显示进度条。",{"path":404,"title":405,"description":406},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","\u003CNuxtErrorBoundary>","\u003CNuxtErrorBoundary> 组件处理其默认插槽中发生的客户端错误。",{"path":408,"title":409,"description":410},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","\u003CNuxtWelcome>","\u003CNuxtWelcome> 组件用于欢迎通过启动模板创建的新项目的用户。",{"path":412,"title":413,"description":414},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-island","\u003CNuxtIsland>","Nuxt 提供了 \u003CNuxtIsland> 组件，用于渲染无客户端 JS 的非交互式组件。",{"path":416,"title":417,"description":418},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-img","\u003CNuxtImg>","Nuxt 提供了 \u003CNuxtImg> 组件来处理自动图像优化。",{"path":420,"title":421,"description":422},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data","createUseAsyncData","一个工厂函数，用于创建带有预定义默认选项的自定义 useAsyncData 组合式函数。",{"path":424,"title":425,"description":426},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-fetch","createUseFetch","一个工厂函数，用于创建带有预定义默认选项的自定义 useFetch 组合式函数。",{"path":428,"title":429,"description":430},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fon-prehydrate","onPrehydrate","使用 onPrehydrate 在 Nuxt 对页面进行 hydration 之前的客户端立即运行回调。",{"path":432,"title":433,"description":434},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-announcer","useAnnouncer","一个用于向屏幕阅读器播报消息的组合式函数。",{"path":436,"title":437,"description":438},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-app-config","useAppConfig","访问在项目中定义的可响应 app config。",{"path":440,"title":441,"description":442},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-async-data","useAsyncData","useAsyncData 以 SSR 友好的方式提供对异步解析数据的访问。",{"path":444,"title":445,"description":446},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-cookie","useCookie","useCookie 是一个 SSR 友好的组合式函数，用于读写 cookie。",{"path":448,"title":449,"description":450},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-error","useError","useError 组合式函数返回正在被处理的全局 Nuxt 错误。",{"path":452,"title":453,"description":454},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch","useFetch","使用 SSR 友好的组合式函数从 API 端点获取数据。",{"path":456,"title":457,"description":458},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head","useHead","useHead 用于自定义 Nuxt 应用各个页面的 head 属性。",{"path":460,"title":461,"description":462},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head-safe","useHeadSafe","处理用户输入时提供 head 数据的推荐方式。",{"path":464,"title":465,"description":466},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-hydration","useHydration","允许完全控制 hydration 周期，以便从服务端设置和接收数据。",{"path":468,"title":469,"description":470},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-layout","useLayout","useLayout 返回为当前路由解析出的布局。",{"path":472,"title":473,"description":474},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","useLazyAsyncData","该组合式函数包装 useAsyncData，会在 handler 解析之前立即触发导航。",{"path":476,"title":477,"description":478},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","useLazyFetch","该组合式函数是对 useFetch 的封装，会在 handler 解析之前立即触发导航。",{"path":480,"title":481,"description":482},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","useLoadingIndicator","该组合式函数让你访问应用页面的加载状态。",{"path":484,"title":485,"description":486},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","useNuxtApp","访问 Nuxt 应用的共享运行时上下文。",{"path":488,"title":489,"description":490},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","useNuxtData","访问数据获取组合式函数的当前缓存值。",{"path":492,"title":493,"description":494},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","usePreviewMode","使用 usePreviewMode 检查并控制 Nuxt 的预览模式",{"path":496,"title":497,"description":498},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-event","useRequestEvent","使用 useRequestEvent 组合式函数访问传入的请求事件。",{"path":500,"title":501,"description":502},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","useRequestFetch","使用 useRequestFetch 组合式函数为服务端 fetch 请求转发请求上下文和请求头。",{"path":504,"title":505,"description":506},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-header","useRequestHeader","使用 useRequestHeader 访问某个特定的传入请求头。",{"path":508,"title":509,"description":510},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-headers","useRequestHeaders","使用 useRequestHeaders 访问传入的请求头。",{"path":512,"title":513,"description":514},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-url","useRequestURL","使用 useRequestURL 组合式函数访问传入的请求 URL。",{"path":516,"title":517,"description":518},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-response-header","useResponseHeader","使用 useResponseHeader 设置服务端响应头。",{"path":520,"title":521,"description":522},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route","useRoute","useRoute 组合式函数返回当前路由。",{"path":524,"title":525,"description":526},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","useRouteAnnouncer","该组合式函数监视页面标题变化，并相应地更新播报消息。",{"path":528,"title":529,"description":530},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-router","useRouter","useRouter 组合式函数返回 router 实例。",{"path":532,"title":533,"description":534},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","useRuntimeConfig","使用 useRuntimeConfig 组合式函数访问运行时配置变量。",{"path":536,"title":537,"description":538},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","useRuntimeHook","在 Nuxt 应用中注册一个运行时钩子，并确保在作用域销毁时被正确清理。",{"path":540,"title":541,"description":542},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","useSeoMeta","useSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":544,"title":545,"description":546},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","useServerSeoMeta","useServerSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":548,"title":549,"description":550},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-state","useState","useState 组合式函数创建一个可响应的、SSR 友好的共享状态。",{"path":552,"title":553,"description":554},"\u002Fdocs\u002Fapi\u002Futils\u002Fdollarfetch","$fetch","Nuxt 使用 ofetch 全局暴露了 $fetch 辅助函数，用于发起 HTTP 请求。",{"path":556,"title":557,"description":558},"\u002Fdocs\u002Fapi\u002Futils\u002Fabort-navigation","abortNavigation","abortNavigation 是一个辅助函数，用于阻止导航的发生，并在设置了参数时抛出错误。",{"path":560,"title":561,"description":562},"\u002Fdocs\u002Fapi\u002Futils\u002Fadd-route-middleware","addRouteMiddleware","addRouteMiddleware() 是一个在你的应用中动态添加中间件的辅助函数。",{"path":564,"title":565,"description":566},"\u002Fdocs\u002Fapi\u002Futils\u002Fcall-once","callOnce","在 SSR 或 CSR 期间只运行一次给定的函数或代码块。",{"path":568,"title":569,"description":570},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-error","clearError","clearError 组合式函数清除所有已处理的错误。",{"path":572,"title":573,"description":574},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-data","clearNuxtData","删除 useAsyncData 和 useFetch 的缓存数据、错误状态和挂起的 promise。",{"path":576,"title":577,"description":578},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-state","clearNuxtState","删除 useState 的缓存状态。",{"path":580,"title":581,"description":582},"\u002Fdocs\u002Fapi\u002Futils\u002Fcreate-error","createError","创建一个带有附加元数据的错误对象。",{"path":584,"title":585,"description":586},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","defineLazyHydrationComponent","使用特定策略定义一个懒加载 hydration 组件。",{"path":588,"title":589,"description":590},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-component","defineNuxtComponent","defineNuxtComponent() 是一个用于使用 Options API 定义类型安全组件的辅助函数。",{"path":592,"title":593,"description":594},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","defineNuxtPlugin","defineNuxtPlugin() 是一个用于创建 Nuxt 插件的辅助函数。",{"path":596,"title":597,"description":598},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","defineNuxtRouteMiddleware","使用 defineNuxtRouteMiddleware 辅助函数创建命名路由中间件。",{"path":600,"title":601,"description":602},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-page-meta","definePageMeta","为你的页面组件定义元数据。",{"path":604,"title":605,"description":606},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-route-rules","defineRouteRules","在页面层面定义用于混合渲染的路由规则。",{"path":608,"title":609,"description":610},"\u002Fdocs\u002Fapi\u002Futils\u002Fnavigate-to","navigateTo","navigateTo 是一个用于以编程方式导航用户的辅助函数。",{"path":612,"title":613,"description":614},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-leave","onBeforeRouteLeave","onBeforeRouteLeave 组合式函数允许在组件内部注册一个路由守卫。",{"path":616,"title":617,"description":618},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-update","onBeforeRouteUpdate","onBeforeRouteUpdate 组合式函数允许在组件内部注册一个路由守卫。",{"path":620,"title":621,"description":622},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-nuxt-ready","onNuxtReady","onNuxtReady 组合式函数允许在你的应用完成初始化之后运行一个回调。",{"path":624,"title":625,"description":626},"\u002Fdocs\u002Fapi\u002Futils\u002Fprefetch-components","prefetchComponents","Nuxt 提供了用于在预取组件方面给予你控制的工具。",{"path":628,"title":629,"description":630},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-components","preloadComponents","Nuxt 提供了用于在预加载组件方面给予你控制的工具。",{"path":632,"title":633,"description":634},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-route-components","preloadRouteComponents","preloadRouteComponents 允许你手动预加载 Nuxt 应用中的单个页面。",{"path":636,"title":637,"description":638},"\u002Fdocs\u002Fapi\u002Futils\u002Fprerender-routes","prerenderRoutes","prerenderRoutes 向 Nitro 暗示预渲染一个额外的路由。",{"path":640,"title":641,"description":642},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-cookie","refreshCookie","当 cookie 发生变化时，手动刷新 useCookie 的值",{"path":644,"title":645,"description":646},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-nuxt-data","refreshNuxtData","刷新 Nuxt 中所有或特定的 asyncData 实例",{"path":648,"title":649,"description":650},"\u002Fdocs\u002Fapi\u002Futils\u002Freload-nuxt-app","reloadNuxtApp","reloadNuxtApp 会对页面执行一次硬刷新。",{"path":652,"title":653,"description":654},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-page-layout","setPageLayout","setPageLayout 允许你动态更改页面的布局。",{"path":656,"title":657,"description":658},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-response-status","setResponseStatus","setResponseStatus 设置响应的状态码（以及可选的 statusText）。",{"path":660,"title":661,"description":662},"\u002Fdocs\u002Fapi\u002Futils\u002Fshow-error","showError","Nuxt 提供了一种快速且简单的方式，在需要的时候显示全屏错误页。",{"path":664,"title":665,"description":666},"\u002Fdocs\u002Fapi\u002Futils\u002Fupdate-app-config","updateAppConfig","在运行时更新 App Config。",{"path":668,"title":669,"description":670},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fadd","nuxt add","在你的 Nuxt 应用中快速搭建一个实体（文件）。",{"path":672,"title":673,"description":674},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fanalyze","nuxt analyze","分析生产环境的打包产物或你的 Nuxt 应用。",{"path":676,"title":677,"description":678},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild","nuxt build","构建你的 Nuxt 应用。",{"path":680,"title":681,"description":682},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild-module","nuxt build-module","用于在发布前构建你的 Nuxt 模块的 Nuxt 命令。",{"path":684,"title":685,"description":686},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fcleanup","nuxt cleanup","移除常见的 Nuxt 生成文件和缓存。",{"path":688,"title":689,"description":690},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdev","nuxt dev","dev 命令会在 http:\u002F\u002Flocalhost:3000 启动一个带有热模块替换（HMR）的开发服务器。",{"path":692,"title":693,"description":694},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdevtools","nuxt devtools","devtools 命令允许你基于每个项目启用或禁用 Nuxt DevTools。",{"path":696,"title":697,"description":698},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fgenerate","nuxt generate","预渲染应用的每一个路由，并将结果存储为纯 HTML 文件。",{"path":700,"title":701,"description":702},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finfo","nuxt info","info 命令会记录当前或指定 Nuxt 项目的相关信息。",{"path":704,"title":705,"description":706},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finit","create nuxt","init 命令用于初始化一个全新的 Nuxt 项目。",{"path":708,"title":709,"description":710},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fmodule","nuxt module","通过命令行搜索并向你的 Nuxt 应用添加模块。",{"path":712,"title":713,"description":714},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fprepare","nuxt prepare","prepare 命令会在你的应用中创建一个 .nuxt 目录并生成类型。",{"path":716,"title":717,"description":718},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fpreview","nuxt preview","preview 命令会启动一个服务器，用于在运行 build 命令后预览你的应用。",{"path":720,"title":721,"description":722},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftest","nuxt test","test 命令使用 @nuxt\u002Ftest-utils 运行测试。",{"path":724,"title":725,"description":726},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftypecheck","nuxt typecheck","typecheck 命令运行 vue-tsc 来全量检查你的应用类型。",{"path":728,"title":729,"description":730},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fupgrade","nuxt upgrade","upgrade 命令将 Nuxt 升级到最新版本。",{"path":732,"title":733,"description":734},"\u002Fdocs\u002Fapi\u002Fkit\u002Fmodules","Modules","Nuxt Kit 提供了一系列工具，帮助你创建和使用模块。你可以使用这些工具来创建自己的模块，或复用已有的模块。",{"path":736,"title":737,"description":738},"\u002Fdocs\u002Fapi\u002Fkit\u002Fruntime-config","Runtime Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 运行时配置。",{"path":740,"title":741,"description":742},"\u002Fdocs\u002Fapi\u002Fkit\u002Ftemplates","Templates","Nuxt Kit 提供了一系列工具，帮助你处理模板。这些函数允许你在开发和构建期间生成额外的文件。",{"path":744,"title":745,"description":746},"\u002Fdocs\u002Fapi\u002Fkit\u002Fapp-config","App Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 应用配置。",{"path":748,"title":749,"description":750},"\u002Fdocs\u002Fapi\u002Fkit\u002Fnitro","Nitro","Nuxt Kit 提供了一系列工具，帮助你使用 Nitro。这些函数允许你添加服务器处理器、插件和预渲染路由。",{"path":752,"title":753,"description":754},"\u002Fdocs\u002Fapi\u002Fkit\u002Fresolving","Resolving","Nuxt Kit 提供了从 Nuxt 根目录或自定义基准路径解析路径的实用工具。",{"path":756,"title":757,"description":758},"\u002Fdocs\u002Fapi\u002Fkit\u002Flogging","Logging","Nuxt Kit 提供了一系列工具，帮助你使用日志记录。这些函数允许你以额外功能记录消息。",{"path":760,"title":761,"description":762},"\u002Fdocs\u002Fapi\u002Fkit\u002Fbuilder","Builder","Nuxt Kit 提供了一系列工具，帮助你使用构建器。这些函数允许你扩展 Vite 和 webpack 配置。",{"path":764,"title":765,"description":766},"\u002Fdocs\u002Fapi\u002Fkit\u002Fexamples","Examples","Nuxt Kit 工具的使用示例。",{"path":768,"title":58,"description":769},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayers","Nuxt Kit 提供了帮助你处理层及其目录结构的工具。",{"path":771,"title":772,"description":773},"\u002Fdocs\u002Fapi\u002Fkit\u002Fprogrammatic","Programmatic Usage","Nuxt Kit 提供了一系列工具，帮助你以编程方式使用 Nuxt。这些函数允许你加载 Nuxt、构建 Nuxt，以及加载 Nuxt 配置。",{"path":775,"title":776,"description":777},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcompatibility","Compatibility","Nuxt Kit 提供了一系列工具，帮助你检查模块与不同 Nuxt 版本的兼容性。",{"path":779,"title":780,"description":781},"\u002Fdocs\u002Fapi\u002Fkit\u002Fautoimports","Auto-imports","Nuxt Kit 提供了一系列工具，帮助你处理自动导入。这些函数允许你注册自己的 utils、composables 和 Vue API。",{"path":783,"title":784,"description":785},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcomponents","Components","Nuxt Kit 提供了一系列工具，帮助你处理组件。你可以全局或局部注册组件，也可以添加要被扫描的目录。",{"path":787,"title":788,"description":789},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcontext","Context","Nuxt Kit 提供了一系列工具，帮助你处理上下文。",{"path":791,"title":792,"description":793},"\u002Fdocs\u002Fapi\u002Fkit\u002Fpages","Pages","Nuxt Kit 提供了一系列工具，帮助你创建和使用页面。你可以使用这些工具来操作页面配置或定义路由规则。",{"path":795,"title":796,"description":797},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayout","Layout","Nuxt Kit 提供了一系列工具，帮助你处理布局。",{"path":799,"title":800,"description":801},"\u002Fdocs\u002Fapi\u002Fkit\u002Fhead","Head","Nuxt Kit 提供了一系列工具，帮助你在模块中管理 head 配置。",{"path":803,"title":804,"description":805},"\u002Fdocs\u002Fapi\u002Fkit\u002Fplugins","Plugins","Nuxt Kit 提供了一系列工具，帮助你创建和使用插件。你可以使用这些函数向你的模块添加插件或插件模板。",{"path":807,"title":330,"description":808},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fhooks","Nuxt 提供了一套强大的钩子系统，可以通过钩子扩展几乎各个方面。",{"path":810,"title":811,"description":812},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fimport-meta","Import meta","使用 `import.meta` 了解你的代码运行在何处。",{"path":814,"title":815,"description":816},"\u002Fdocs\u002Fapi\u002Fnuxt-config","Nuxt 配置","发现你可以在 nuxt.config.ts 文件中使用的所有选项。",{"path":818,"title":819,"description":820},"\u002Fdocs\u002Fapi","Nuxt API 参考","探索所有 Nuxt 内部机制：组件、组合式函数、工具函数、命令等等。",{"path":822,"title":823,"description":824},"\u002Fdocs\u002Fcommunity\u002Fgetting-help","获取帮助","我们是一个友好的开发者社区，很乐意提供帮助。",{"path":826,"title":827,"description":828},"\u002Fdocs\u002Fcommunity\u002Freporting-bugs","报告 Bug","开源中最有价值的角色之一，就是花时间把 bug 报告得清楚明白。",{"path":830,"title":831,"description":832},"\u002Fdocs\u002Fcommunity\u002Fcontribution","贡献","Nuxt 是一个社区项目——因此我们欢迎各种形式的贡献！❤️",{"path":834,"title":835,"description":836},"\u002Fdocs\u002Fcommunity\u002Fframework-contribution","框架贡献","关于向框架仓库贡献的一些具体要点。",{"path":838,"title":839,"description":840},"\u002Fdocs\u002Fcommunity\u002Froadmap","路线图","Nuxt 在不断发展，新功能和模块一直在增加。",{"path":842,"title":843,"description":844},"\u002Fdocs\u002Fcommunity\u002Fchangelog","发布","发现 Nuxt 及 Nuxt 官方模块的最新发布。",{"path":846,"title":847,"description":848},"\u002Fdocs\u002Fbridge\u002Foverview","概述","缩小与 Nuxt 3 的差异，并减轻迁移到 Nuxt 3 的负担。",{"path":850,"title":14,"description":851},"\u002Fdocs\u002Fbridge\u002Fconfiguration","了解如何根据你的需求配置 Nuxt Bridge。",{"path":853,"title":222,"description":854},"\u002Fdocs\u002Fbridge\u002Ftypescript","了解如何在 Nuxt Bridge 中使用 TypeScript。",{"path":856,"title":857,"description":858},"\u002Fdocs\u002Fbridge\u002Fbridge-composition-api","旧版 Composition API","了解如何使用 Nuxt Bridge 迁移到 Composition API。",{"path":860,"title":861,"description":862},"\u002Fdocs\u002Fbridge\u002Fplugins-and-middleware","插件和中间件","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。",{"path":864,"title":865,"description":866},"\u002Fdocs\u002Fbridge\u002Fnuxt3-compatible-api","新的 Composition API","Nuxt Bridge 实现了与 Nuxt 3 兼容的组合式函数。",{"path":868,"title":869,"description":870},"\u002Fdocs\u002Fbridge\u002Fmeta","Meta 标签","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新 meta 标签。",{"path":872,"title":322,"description":873},"\u002Fdocs\u002Fbridge\u002Fruntime-config","Nuxt 提供了一个运行时配置 API，用于在应用中暴露配置和密钥。",{"path":875,"title":749,"description":876},"\u002Fdocs\u002Fbridge\u002Fnitro","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Nitro。",{"path":878,"title":879,"description":880},"\u002Fdocs\u002Fbridge\u002Fvite","Vite","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Vite。",{"path":882,"title":847,"description":883},"\u002Fdocs\u002Fmigration\u002Foverview","Nuxt 3 是对 Nuxt 2 的完整重写，并且基于一套全新的底层技术。",{"path":885,"title":886,"description":887},"\u002Fdocs\u002Fmigration\u002Fbundling","构建工具","了解如何从 Nuxt 2 迁移到 Nuxt 3 的构建工具。",{"path":889,"title":890,"description":891},"\u002Fdocs\u002Fmigration\u002Fserver","服务器","了解如何从 Nuxt 2 迁移到 Nuxt 3 的服务器。",{"path":893,"title":14,"description":894},"\u002Fdocs\u002Fmigration\u002Fconfiguration","了解如何从 Nuxt 2 迁移到 Nuxt 3 的新配置。",{"path":896,"title":214,"description":897},"\u002Fdocs\u002Fmigration\u002Fmodule-authors","了解如何从 Nuxt 2 迁移到 Nuxt 3 模块。",{"path":899,"title":206,"description":900},"\u002Fdocs\u002Fmigration\u002Fauto-imports","Nuxt 3 采用最小摩擦的方式，即在任何可能的地方自动导入组件和组合式函数。",{"path":902,"title":869,"description":903},"\u002Fdocs\u002Fmigration\u002Fmeta","管理你的 meta 标签，从 Nuxt 2 到 Nuxt 3。",{"path":905,"title":861,"description":906},"\u002Fdocs\u002Fmigration\u002Fplugins-and-middleware","了解如何从 Nuxt 2 迁移到 Nuxt 3 的插件和中间件。",{"path":908,"title":909,"description":910},"\u002Fdocs\u002Fmigration\u002Fpages-and-layouts","页面和布局","了解如何从 Nuxt 2 迁移到 Nuxt 3 的页面和布局。",{"path":912,"title":913,"description":914},"\u002Fdocs\u002Fmigration\u002Fcomponent-options","组件选项","了解如何从 Nuxt 2 的组件选项迁移到 Nuxt 3 的组合式函数。",{"path":916,"title":322,"description":917},"\u002Fdocs\u002Fmigration\u002Fruntime-config","了解如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。",{"path":919,"title":920,"description":921},"\u002Fdocs\u002Freadme","Nuxt 文档","本仓库包含 Nuxt 的文档，托管于 https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fintroduction",{"path":923,"title":924,"description":925},"\u002Fdocs\u002Ferrors\u002Fb5001","NUXT_B5001","缺少 compatibilityDate (兼容性日期)",{"path":927,"title":928,"description":929},"\u002Fdocs\u002Ferrors\u002Fb5003","NUXT_B5003","保留的 runtimeConfig.app 命名空间",{"path":931,"title":932,"description":933},"\u002Fdocs\u002Ferrors\u002Fb5004","NUXT_B5004","不支持外部配置文件",{"path":935,"title":936,"description":937},"\u002Fdocs\u002Ferrors\u002Fe1001","NUXT_E1001","在 Nuxt 上下文之外调用了组合式函数。",{"path":939,"title":940,"description":941},"\u002Fdocs\u002Ferrors\u002Fe1006","NUXT_E1006","onPrehydrate 未被构建流水线处理。",{"path":943,"title":944,"description":945},"\u002Fdocs\u002Ferrors\u002Fe1007","NUXT_E1007","编译期提示辅助函数在运行时被调用。",{"path":947,"title":948,"description":949},"\u002Fdocs\u002Ferrors\u002Fe2001","NUXT_E2001","外部导航未设置 external: true。",{"path":951,"title":952,"description":953},"\u002Fdocs\u002Ferrors\u002Fe2002","NUXT_E2002","使用了危险协议的导航。",{"path":955,"title":956,"description":957},"\u002Fdocs\u002Ferrors\u002Fe2003","NUXT_E2003","abortNavigation() 在中间件之外被调用。",{"path":959,"title":960,"description":961},"\u002Fdocs\u002Ferrors\u002Fe2004","NUXT_E2004","未知的路由中间件。",{"path":963,"title":964,"description":965},"\u002Fdocs\u002Ferrors\u002Fe2005","NUXT_E2005","在中间件内调用了 useRoute。",{"path":967,"title":968,"description":969},"\u002Fdocs\u002Ferrors\u002Fe2007","NUXT_E2007","在组件中于服务端调用了 setPageLayout。",{"path":971,"title":972,"description":973},"\u002Fdocs\u002Ferrors\u002Fe3001","NUXT_E3001","useFetch 的请求 URL 以 \"\u002F\u002F\" 开头。",{"path":975,"title":976,"description":977},"\u002Fdocs\u002Ferrors\u002Fe3008","NUXT_E3008","useAsyncData 的 key 必须是非空字符串。",{"path":979,"title":980,"description":981},"\u002Fdocs\u002Ferrors\u002Fe3009","NUXT_E3009","useAsyncData 的处理函数必须是一个函数。",{"path":983,"title":984,"description":985},"\u002Fdocs\u002Ferrors\u002Fe4012","NUXT_E4012","无法解析 island（岛）响应。",{"path":987,"title":988,"description":989},"\u002Fdocs\u002Ferrors\u002Fe4016","NUXT_E4016","嵌套页面无法显示，因为其父页面没有渲染 \u003CNuxtPage \u002F>。",{"path":991,"title":992,"description":993},"\u002Fdocs\u002Ferrors\u002Fe5001","NUXT_E5001","应用清单（app manifest）未启用。",{"path":995,"title":996,"description":997},"\u002Fdocs\u002Ferrors\u002Fe6001","NUXT_E6001","缺少 Unhead 实例。",{"path":999,"title":1000,"description":1001},"\u002Fdocs\u002Ferrors\u002Fe7001","NUXT_E7001","Payload URL 包含主机名。",{"path":1003,"title":1004,"description":1005},"\u002Fdocs\u002Ferrors\u002Fe7007","NUXT_E7007","useState 的初始化值必须是一个函数。",{"path":1007,"title":1008,"description":1009},"\u002Fdocs\u002Ferrors\u002Fe7008","NUXT_E7008","callOnce 的 fn 必须是一个函数。",{"path":1011,"title":1012,"description":1013},"\u002Fdocs\u002Ferrors\u002Fe7009","NUXT_E7009","useState 的 key 必须是一个字符串。",{"path":1015,"title":1016,"description":1017},"\u002Fdocs\u002Ferrors\u002Fe7010","NUXT_E7010","callOnce 的 key 必须是一个字符串。",{"id":1019,"title":42,"body":1020,"description":43,"extension":7933,"meta":7934,"navigation":7935,"path":41,"seo":7936,"stem":7937,"__hash__":7938},"docs\u002Fdocs\u002F1.getting-started\u002F10.data-fetching.md",{"type":1021,"value":1022,"toc":7921},"minimark",[1023,1040,1043,1079,1086,1095,1104,1115,1129,1147,1482,1491,1496,1507,1518,1526,1537,1552,1561,1597,1600,1626,1673,1678,1690,1805,1827,1836,1840,1855,1915,1952,1970,2076,2086,2131,2136,2146,2250,2261,7917],[1024,1025,1026,1027,1030,1031,1036,1037,1039],"p",{},"Nuxt 自带两个 composables 和一个内置库，用于在浏览器或服务端环境中执行数据获取：",[1028,1029,453],"code",{},"、",[1032,1033,1034],"a",{"href":440},[1028,1035,441],{}," 和 ",[1028,1038,553],{},"。",[1024,1041,1042],{},"简而言之：",[1044,1045,1046,1054,1069],"ul",{},[1047,1048,1049,1053],"li",{},[1032,1050,1051],{"href":552},[1028,1052,553],{}," 是发起网络请求最简单的方式。",[1047,1055,1056,1060,1061,1063,1064,1068],{},[1032,1057,1058],{"href":452},[1028,1059,453],{}," 是对 ",[1028,1062,553],{}," 的封装，在",[1032,1065,1067],{"href":1066},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#universal-rendering","统一渲染（universal rendering）","中只获取数据一次。",[1047,1070,1071,1075,1076,1078],{},[1032,1072,1073],{"href":440},[1028,1074,441],{}," 与 ",[1028,1077,453],{}," 类似，但提供了更细粒度的控制。",[1024,1080,1081,1036,1083,1085],{},[1028,1082,453],{},[1028,1084,441],{}," 共享一组通用的选项和模式，我们将在后面的小节中详述。",[1087,1088,1090,1091,1036,1093],"h2",{"id":1089},"为何需要-usefetch-和-useasyncdata","为何需要 ",[1028,1092,453],{},[1028,1094,441],{},[1024,1096,1097,1098,1103],{},"Nuxt 是一个能够在服务端和客户端环境中运行同构（或通用）代码的框架。如果在 Vue 组件的 setup 函数中使用 ",[1032,1099,1100,1102],{"href":552},[1028,1101,553],{}," 函数"," 来执行数据获取，可能会导致数据被获取两次：一次在服务端（用于渲染 HTML），一次在客户端（当 HTML 被 hydration 时）。这可能导致 hydration 问题、增加可交互时间，并引发不可预测的行为。",[1024,1105,1106,1036,1110,1114],{},[1032,1107,1108],{"href":452},[1028,1109,453],{},[1032,1111,1112],{"href":440},[1028,1113,441],{}," 这两个 composables 通过确保：如果在服务端发起了 API 调用，数据会被转发到客户端（在 payload 中），从而解决这个问题。",[1024,1116,1117,1118,1124,1125,1128],{},"payload 是一个可以通过 ",[1032,1119,1121],{"href":1120},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app#payload",[1028,1122,1123],{},"useNuxtApp().payload"," 访问的 JavaScript 对象。它在客户端被用来避免在代码于浏览器中执行时",[1032,1126,1127],{"href":1066},"进行 hydration 期间","重新获取相同的数据。",[1130,1131,1132],"tip",{},[1024,1133,1134,1135,1141,1142,1146],{},"使用 ",[1032,1136,1140],{"href":1137,"rel":1138},"https:\u002F\u002Fdevtools.nuxt.com",[1139],"nofollow","Nuxt DevTools"," 在 ",[1143,1144,1145],"strong",{},"Payload 标签页","中检查这些数据。",[1148,1149,1154],"pre",{"className":1150,"code":1151,"filename":1152,"language":1153,"meta":354,"style":354},"language-vue shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst { data } = await useFetch('\u002Fapi\u002Fdata')\n\nasync function handleFormSubmit () {\n  const res = await $fetch('\u002Fapi\u002Fsubmit', {\n    method: 'POST',\n    body: {\n      \u002F\u002F My form data\n    },\n  })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"data == undefined\">\n    No data\n  \u003C\u002Fdiv>\n  \u003Cdiv v-else>\n    \u003Cform @submit=\"handleFormSubmit\">\n      \u003C!-- form input tags -->\n    \u003C\u002Fform>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fapp.vue","vue",[1028,1155,1156,1192,1236,1243,1261,1292,1312,1322,1329,1335,1343,1349,1359,1364,1374,1397,1403,1413,1425,1448,1454,1464,1473],{"__ignoreMap":354},[1157,1158,1161,1165,1169,1173,1176,1179,1183,1187,1189],"span",{"class":1159,"line":1160},"line",1,[1157,1162,1164],{"class":1163},"sF54B","\u003C",[1157,1166,1168],{"class":1167},"s6g6u","script",[1157,1170,1172],{"class":1171},"sXjFp"," setup",[1157,1174,1175],{"class":1171}," lang",[1157,1177,1178],{"class":1163},"=",[1157,1180,1182],{"class":1181},"s0jeK","\"",[1157,1184,1186],{"class":1185},"s-Aze","ts",[1157,1188,1182],{"class":1181},[1157,1190,1191],{"class":1163},">\n",[1157,1193,1195,1199,1202,1206,1209,1213,1217,1221,1225,1228,1231,1233],{"class":1159,"line":1194},2,[1157,1196,1198],{"class":1197},"sV7Px","const",[1157,1200,1201],{"class":1163}," {",[1157,1203,1205],{"class":1204},"sJTDI"," data",[1157,1207,1208],{"class":1163}," }",[1157,1210,1212],{"class":1211},"sXPRQ"," =",[1157,1214,1216],{"class":1215},"szyBz"," await",[1157,1218,1220],{"class":1219},"srJn9"," useFetch",[1157,1222,1224],{"class":1223},"smVNa","(",[1157,1226,1227],{"class":1181},"'",[1157,1229,1230],{"class":1185},"\u002Fapi\u002Fdata",[1157,1232,1227],{"class":1181},[1157,1234,1235],{"class":1223},")\n",[1157,1237,1239],{"class":1159,"line":1238},3,[1157,1240,1242],{"emptyLinePlaceholder":1241},true,"\n",[1157,1244,1246,1249,1252,1255,1258],{"class":1159,"line":1245},4,[1157,1247,1248],{"class":1197},"async",[1157,1250,1251],{"class":1197}," function",[1157,1253,1254],{"class":1219}," handleFormSubmit",[1157,1256,1257],{"class":1163}," ()",[1157,1259,1260],{"class":1163}," {\n",[1157,1262,1264,1267,1270,1272,1274,1277,1280,1282,1285,1287,1290],{"class":1159,"line":1263},5,[1157,1265,1266],{"class":1197},"  const",[1157,1268,1269],{"class":1204}," res",[1157,1271,1212],{"class":1211},[1157,1273,1216],{"class":1215},[1157,1275,1276],{"class":1219}," $fetch",[1157,1278,1224],{"class":1279},"sOtFm",[1157,1281,1227],{"class":1181},[1157,1283,1284],{"class":1185},"\u002Fapi\u002Fsubmit",[1157,1286,1227],{"class":1181},[1157,1288,1289],{"class":1163},",",[1157,1291,1260],{"class":1163},[1157,1293,1295,1298,1301,1304,1307,1309],{"class":1159,"line":1294},6,[1157,1296,1297],{"class":1279},"    method",[1157,1299,1300],{"class":1163},":",[1157,1302,1303],{"class":1181}," '",[1157,1305,1306],{"class":1185},"POST",[1157,1308,1227],{"class":1181},[1157,1310,1311],{"class":1163},",\n",[1157,1313,1315,1318,1320],{"class":1159,"line":1314},7,[1157,1316,1317],{"class":1279},"    body",[1157,1319,1300],{"class":1163},[1157,1321,1260],{"class":1163},[1157,1323,1325],{"class":1159,"line":1324},8,[1157,1326,1328],{"class":1327},"sZqJ9","      \u002F\u002F My form data\n",[1157,1330,1332],{"class":1159,"line":1331},9,[1157,1333,1334],{"class":1163},"    },\n",[1157,1336,1338,1341],{"class":1159,"line":1337},10,[1157,1339,1340],{"class":1163},"  }",[1157,1342,1235],{"class":1279},[1157,1344,1346],{"class":1159,"line":1345},11,[1157,1347,1348],{"class":1163},"}\n",[1157,1350,1352,1355,1357],{"class":1159,"line":1351},12,[1157,1353,1354],{"class":1163},"\u003C\u002F",[1157,1356,1168],{"class":1167},[1157,1358,1191],{"class":1163},[1157,1360,1362],{"class":1159,"line":1361},13,[1157,1363,1242],{"emptyLinePlaceholder":1241},[1157,1365,1367,1369,1372],{"class":1159,"line":1366},14,[1157,1368,1164],{"class":1163},[1157,1370,1371],{"class":1167},"template",[1157,1373,1191],{"class":1163},[1157,1375,1377,1380,1383,1386,1388,1390,1393,1395],{"class":1159,"line":1376},15,[1157,1378,1379],{"class":1163},"  \u003C",[1157,1381,1382],{"class":1167},"div",[1157,1384,1385],{"class":1171}," v-if",[1157,1387,1178],{"class":1163},[1157,1389,1182],{"class":1181},[1157,1391,1392],{"class":1185},"data == undefined",[1157,1394,1182],{"class":1181},[1157,1396,1191],{"class":1163},[1157,1398,1400],{"class":1159,"line":1399},16,[1157,1401,1402],{"class":1223},"    No data\n",[1157,1404,1406,1409,1411],{"class":1159,"line":1405},17,[1157,1407,1408],{"class":1163},"  \u003C\u002F",[1157,1410,1382],{"class":1167},[1157,1412,1191],{"class":1163},[1157,1414,1416,1418,1420,1423],{"class":1159,"line":1415},18,[1157,1417,1379],{"class":1163},[1157,1419,1382],{"class":1167},[1157,1421,1422],{"class":1171}," v-else",[1157,1424,1191],{"class":1163},[1157,1426,1428,1431,1434,1437,1439,1441,1444,1446],{"class":1159,"line":1427},19,[1157,1429,1430],{"class":1163},"    \u003C",[1157,1432,1433],{"class":1167},"form",[1157,1435,1436],{"class":1171}," @submit",[1157,1438,1178],{"class":1163},[1157,1440,1182],{"class":1181},[1157,1442,1443],{"class":1185},"handleFormSubmit",[1157,1445,1182],{"class":1181},[1157,1447,1191],{"class":1163},[1157,1449,1451],{"class":1159,"line":1450},20,[1157,1452,1453],{"class":1327},"      \u003C!-- form input tags -->\n",[1157,1455,1457,1460,1462],{"class":1159,"line":1456},21,[1157,1458,1459],{"class":1163},"    \u003C\u002F",[1157,1461,1433],{"class":1167},[1157,1463,1191],{"class":1163},[1157,1465,1467,1469,1471],{"class":1159,"line":1466},22,[1157,1468,1408],{"class":1163},[1157,1470,1382],{"class":1167},[1157,1472,1191],{"class":1163},[1157,1474,1476,1478,1480],{"class":1159,"line":1475},23,[1157,1477,1354],{"class":1163},[1157,1479,1371],{"class":1167},[1157,1481,1191],{"class":1163},[1024,1483,1484,1485,1487,1488,1490],{},"在上面的示例中，",[1028,1486,453],{}," 会确保请求发生在服务端，并被正确地转发到浏览器。",[1028,1489,553],{}," 没有这种机制，当请求仅从浏览器发起时，它是更好的选择。",[1492,1493,1495],"h3",{"id":1494},"suspense","Suspense",[1024,1497,1498,1499,1506],{},"Nuxt 在底层使用了 Vue 的 ",[1032,1500,1503],{"href":1501,"rel":1502},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Fsuspense",[1139],[1028,1504,1505],{},"\u003CSuspense>"," 组件，以防止在视图所需的每个异步数据都可用之前进行导航。数据获取 composables 可以帮助你利用这个特性，并视情况选择每个调用最合适的方式。",[1508,1509,1510],"note",{},[1024,1511,1512,1513,1517],{},"你可以添加 ",[1032,1514,1515],{"href":400},[1028,1516,401],{}," 来在页面导航之间添加进度条。",[1492,1519,1521,1522,1525],{"id":1520},"关于-await-的说明","关于 ",[1028,1523,1524],{},"await"," 的说明",[1024,1527,1528,1529,1531,1532,1036,1534,1536],{},"本文档中的示例通常会 ",[1028,1530,1524],{}," 对 ",[1028,1533,453],{},[1028,1535,441],{}," 的调用，但这并不总是必需的。",[1024,1538,1539,1541,1542,1545,1546,1036,1548,1551],{},[1028,1540,1524],{}," ",[1143,1543,1544],{},"不会","改变服务端渲染的 HTML。在服务端渲染期间，无论哪种方式，Nuxt 都会等待请求解析后再序列化页面（底层是 ",[1028,1547,1505],{},[1028,1549,1550],{},"onServerPrefetch","），因此始终会向浏览器发送完整填充的结果。",[1024,1553,1554,1556,1557,1560],{},[1028,1555,1524],{}," 改变的是你自己的 ",[1028,1558,1559],{},"\u003Cscript setup>"," 中接下来发生的事情，以及客户端导航的行为：",[1044,1562,1563,1579],{},[1047,1564,1565,1569,1570,1573,1574,1578],{},[1143,1566,1134,1567],{},[1028,1568,1524],{}," 时，执行会暂停，直到数据就绪，因此调用之后的任何代码都可以依赖 ",[1028,1571,1572],{},"data"," 已经被填充。在客户端导航时，这会阻塞导航直到数据解析完成：用户停留在当前页面（可选地带有一个 ",[1032,1575,1576],{"href":400},[1028,1577,401],{},"），然后跳转到一个已经完整填充的页面。这是默认行为。",[1047,1580,1581,1586,1587,1589,1590,1036,1593,1596],{},[1143,1582,1583,1584],{},"不使用 ",[1028,1585,1524],{}," 时，执行会立即继续，而请求在后台运行，因此 ",[1028,1588,1572],{}," 以默认值开始，并在请求解析后填充。在客户端导航时，这意味着导航会立即发生，你需要自己处理加载和错误状态，通常通过返回的 ",[1028,1591,1592],{},"status",[1028,1594,1595],{},"error"," refs。",[1024,1598,1599],{},"两种方式并非绝对的好坏之分；正确的选择取决于你希望该路由拥有怎样的体验。",[1024,1601,1602,1603,1609,1610,1612,1613,1615,1616,1620,1621,1625],{},"不 await 在用户可见效果上类似于 ",[1032,1604,1606],{"href":1605},"#lazy",[1028,1607,1608],{},"lazy"," 选项（不会阻塞导航，你自己处理加载状态），但两者并不相同：",[1028,1611,1608],{}," 是一个显式标志，会将请求推迟到组件挂载时，而仅仅不 await 是在 setup 期间就发起请求。当你想要非阻塞行为时，推荐使用 ",[1028,1614,1608],{},"（或 ",[1032,1617,1618],{"href":476},[1028,1619,477],{}," \u002F ",[1032,1622,1623],{"href":472},[1028,1624,473],{},"），因为它使意图更明确。",[1627,1628,1629],"warning",{},[1024,1630,1631,1036,1633,1635,1636,1638,1639,1641,1642,1644,1645,1648,1649,1652,1653,1656,1657,1659,1660,1141,1662,1664,1665,1667,1668,1670,1671,1039],{},[1028,1632,1524],{},[1028,1634,1608],{}," 是相互独立的，在客户端 await 一个 ",[1028,1637,1608],{}," 函数不会产生你期望的效果。如果你 ",[1028,1640,1524],{}," 一个 ",[1028,1643,1608],{}," 调用（例如 ",[1028,1646,1647],{},"await useLazyFetch(...)"," 或 ",[1028,1650,1651],{},"await useFetch(..., { lazy: true })","），它仍然会像往常一样阻塞服务端渲染，但在",[1143,1654,1655],{},"客户端导航","时，",[1028,1658,1524],{}," 会立即解析而不等待请求。",[1028,1661,1572],{},[1028,1663,1524],{}," 之后仍然会是它的默认值，你必须通过 ",[1028,1666,1592],{}," 处理加载状态。如果你确实希望导航等待数据，请去掉 ",[1028,1669,1608],{}," 选项，而不是依赖 ",[1028,1672,1524],{},[1087,1674,1676],{"id":1675},"fetch",[1028,1677,553],{},[1024,1679,1680,1681,1686,1687,1689],{},"Nuxt 内置了 ",[1032,1682,1685],{"href":1683,"rel":1684},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fofetch",[1139],"ofetch"," 库，并在整个应用中以 ",[1028,1688,553],{}," 别名全局自动导入。",[1148,1691,1695],{"className":1150,"code":1692,"filename":1693,"language":1153,"meta":1694,"style":354},"\u003Cscript setup lang=\"ts\">\nasync function addTodo () {\n  const todo = await $fetch('\u002Fapi\u002Ftodos', {\n    method: 'POST',\n    body: {\n      \u002F\u002F My todo data\n    },\n  })\n}\n\u003C\u002Fscript>\n","pages\u002Ftodos.vue","twoslash",[1028,1696,1697,1717,1730,1756,1770,1778,1783,1787,1793,1797],{"__ignoreMap":354},[1157,1698,1699,1701,1703,1705,1707,1709,1711,1713,1715],{"class":1159,"line":1160},[1157,1700,1164],{"class":1163},[1157,1702,1168],{"class":1167},[1157,1704,1172],{"class":1171},[1157,1706,1175],{"class":1171},[1157,1708,1178],{"class":1163},[1157,1710,1182],{"class":1181},[1157,1712,1186],{"class":1185},[1157,1714,1182],{"class":1181},[1157,1716,1191],{"class":1163},[1157,1718,1719,1721,1723,1726,1728],{"class":1159,"line":1194},[1157,1720,1248],{"class":1197},[1157,1722,1251],{"class":1197},[1157,1724,1725],{"class":1219}," addTodo",[1157,1727,1257],{"class":1163},[1157,1729,1260],{"class":1163},[1157,1731,1732,1734,1737,1739,1741,1743,1745,1747,1750,1752,1754],{"class":1159,"line":1238},[1157,1733,1266],{"class":1197},[1157,1735,1736],{"class":1204}," todo",[1157,1738,1212],{"class":1211},[1157,1740,1216],{"class":1215},[1157,1742,1276],{"class":1219},[1157,1744,1224],{"class":1279},[1157,1746,1227],{"class":1181},[1157,1748,1749],{"class":1185},"\u002Fapi\u002Ftodos",[1157,1751,1227],{"class":1181},[1157,1753,1289],{"class":1163},[1157,1755,1260],{"class":1163},[1157,1757,1758,1760,1762,1764,1766,1768],{"class":1159,"line":1245},[1157,1759,1297],{"class":1279},[1157,1761,1300],{"class":1163},[1157,1763,1303],{"class":1181},[1157,1765,1306],{"class":1185},[1157,1767,1227],{"class":1181},[1157,1769,1311],{"class":1163},[1157,1771,1772,1774,1776],{"class":1159,"line":1263},[1157,1773,1317],{"class":1279},[1157,1775,1300],{"class":1163},[1157,1777,1260],{"class":1163},[1157,1779,1780],{"class":1159,"line":1294},[1157,1781,1782],{"class":1327},"      \u002F\u002F My todo data\n",[1157,1784,1785],{"class":1159,"line":1314},[1157,1786,1334],{"class":1163},[1157,1788,1789,1791],{"class":1159,"line":1324},[1157,1790,1340],{"class":1163},[1157,1792,1235],{"class":1279},[1157,1794,1795],{"class":1159,"line":1331},[1157,1796,1348],{"class":1163},[1157,1798,1799,1801,1803],{"class":1159,"line":1337},[1157,1800,1354],{"class":1163},[1157,1802,1168],{"class":1167},[1157,1804,1191],{"class":1163},[1627,1806,1807],{},[1024,1808,1809,1810,1812,1813,1817,1818,1820,1821,1826],{},"注意，仅使用 ",[1028,1811,553],{}," 不会提供",[1032,1814,1816],{"href":1815},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching#the-need-for-usefetch-and-useasyncdata","网络请求去重和导航阻止","。:br\n推荐将 ",[1028,1819,553],{}," 用于客户端交互（基于事件），或者在与 ",[1032,1822,1824],{"href":1823},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching#useasyncdata",[1028,1825,441],{}," 结合时用于获取组件的初始数据。",[1828,1829,1830],"read-more",{"to":552},[1024,1831,1832,1833,1835],{},"阅读更多关于 ",[1028,1834,553],{}," 的内容。",[1492,1837,1839],{"id":1838},"将客户端请求头传递给-api","将客户端请求头传递给 API",[1024,1841,1842,1843,1845,1846,1850,1851,1854],{},"在服务端调用 ",[1028,1844,453],{}," 时，Nuxt 会使用 ",[1032,1847,1848],{"href":500},[1028,1849,501],{}," 来代理客户端的请求头和 cookie（除了那些不应被转发的请求头，如 ",[1028,1852,1853],{},"host","）。",[1148,1856,1858],{"className":1150,"code":1857,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data } = await useFetch('\u002Fapi\u002Fecho')\n\u003C\u002Fscript>\n",[1028,1859,1860,1880,1907],{"__ignoreMap":354},[1157,1861,1862,1864,1866,1868,1870,1872,1874,1876,1878],{"class":1159,"line":1160},[1157,1863,1164],{"class":1163},[1157,1865,1168],{"class":1167},[1157,1867,1172],{"class":1171},[1157,1869,1175],{"class":1171},[1157,1871,1178],{"class":1163},[1157,1873,1182],{"class":1181},[1157,1875,1186],{"class":1185},[1157,1877,1182],{"class":1181},[1157,1879,1191],{"class":1163},[1157,1881,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900,1903,1905],{"class":1159,"line":1194},[1157,1883,1198],{"class":1197},[1157,1885,1201],{"class":1163},[1157,1887,1205],{"class":1204},[1157,1889,1208],{"class":1163},[1157,1891,1212],{"class":1211},[1157,1893,1216],{"class":1215},[1157,1895,1220],{"class":1219},[1157,1897,1224],{"class":1223},[1157,1899,1227],{"class":1181},[1157,1901,1902],{"class":1185},"\u002Fapi\u002Fecho",[1157,1904,1227],{"class":1181},[1157,1906,1235],{"class":1223},[1157,1908,1909,1911,1913],{"class":1159,"line":1238},[1157,1910,1354],{"class":1163},[1157,1912,1168],{"class":1167},[1157,1914,1191],{"class":1163},[1148,1916,1919],{"className":1917,"code":1918,"language":1186,"meta":354,"style":354},"language-ts shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","\u002F\u002F \u002Fapi\u002Fecho.ts\nexport default defineEventHandler(event => parseCookies(event))\n",[1028,1920,1921,1926],{"__ignoreMap":354},[1157,1922,1923],{"class":1159,"line":1160},[1157,1924,1925],{"class":1327},"\u002F\u002F \u002Fapi\u002Fecho.ts\n",[1157,1927,1928,1931,1934,1937,1939,1943,1946,1949],{"class":1159,"line":1194},[1157,1929,1930],{"class":1215},"export",[1157,1932,1933],{"class":1215}," default",[1157,1935,1936],{"class":1219}," defineEventHandler",[1157,1938,1224],{"class":1223},[1157,1940,1942],{"class":1941},"ssIVr","event",[1157,1944,1945],{"class":1197}," =>",[1157,1947,1948],{"class":1219}," parseCookies",[1157,1950,1951],{"class":1223},"(event))\n",[1024,1953,1954,1955,1959,1960,1962,1963,1966,1967,1969],{},"或者，下面的示例展示了如何使用 ",[1032,1956,1957],{"href":508},[1028,1958,509],{}," 来访问并将 cookie 从服务端请求（起源于客户端）发送到 API。通过使用同构的 ",[1028,1961,553],{}," 调用，我们确保 API 端点能够访问用户浏览器最初发送的同一个 ",[1028,1964,1965],{},"cookie"," 请求头。只有当你没有使用 ",[1028,1968,453],{}," 时才需要这样做。",[1148,1971,1973],{"className":1150,"code":1972,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst headers = useRequestHeaders(['cookie'])\n\nasync function getCurrentUser () {\n  return await $fetch('\u002Fapi\u002Fme', { headers })\n}\n\u003C\u002Fscript>\n",[1028,1974,1975,1995,2019,2023,2036,2064,2068],{"__ignoreMap":354},[1157,1976,1977,1979,1981,1983,1985,1987,1989,1991,1993],{"class":1159,"line":1160},[1157,1978,1164],{"class":1163},[1157,1980,1168],{"class":1167},[1157,1982,1172],{"class":1171},[1157,1984,1175],{"class":1171},[1157,1986,1178],{"class":1163},[1157,1988,1182],{"class":1181},[1157,1990,1186],{"class":1185},[1157,1992,1182],{"class":1181},[1157,1994,1191],{"class":1163},[1157,1996,1997,1999,2002,2004,2007,2010,2012,2014,2016],{"class":1159,"line":1194},[1157,1998,1198],{"class":1197},[1157,2000,2001],{"class":1204}," headers",[1157,2003,1212],{"class":1211},[1157,2005,2006],{"class":1219}," useRequestHeaders",[1157,2008,2009],{"class":1223},"([",[1157,2011,1227],{"class":1181},[1157,2013,1965],{"class":1185},[1157,2015,1227],{"class":1181},[1157,2017,2018],{"class":1223},"])\n",[1157,2020,2021],{"class":1159,"line":1238},[1157,2022,1242],{"emptyLinePlaceholder":1241},[1157,2024,2025,2027,2029,2032,2034],{"class":1159,"line":1245},[1157,2026,1248],{"class":1197},[1157,2028,1251],{"class":1197},[1157,2030,2031],{"class":1219}," getCurrentUser",[1157,2033,1257],{"class":1163},[1157,2035,1260],{"class":1163},[1157,2037,2038,2041,2043,2045,2047,2049,2052,2054,2056,2058,2060,2062],{"class":1159,"line":1263},[1157,2039,2040],{"class":1215},"  return",[1157,2042,1216],{"class":1215},[1157,2044,1276],{"class":1219},[1157,2046,1224],{"class":1279},[1157,2048,1227],{"class":1181},[1157,2050,2051],{"class":1185},"\u002Fapi\u002Fme",[1157,2053,1227],{"class":1181},[1157,2055,1289],{"class":1163},[1157,2057,1201],{"class":1163},[1157,2059,2001],{"class":1223},[1157,2061,1208],{"class":1163},[1157,2063,1235],{"class":1279},[1157,2065,2066],{"class":1159,"line":1294},[1157,2067,1348],{"class":1163},[1157,2069,2070,2072,2074],{"class":1159,"line":1314},[1157,2071,1354],{"class":1163},[1157,2073,1168],{"class":1167},[1157,2075,1191],{"class":1163},[1130,2077,2078],{},[1024,2079,2080,2081,2085],{},"你也可以使用 ",[1032,2082,2083],{"href":500},[1028,2084,501],{}," 来自动将请求头代理到调用中。",[2087,2088,2089,2092],"caution",{},[1024,2090,2091],{},"在将请求头代理到外部 API 之前要非常小心，只包含你需要的请求头。并非所有请求头都适合被绕过，可能会引入不期望的行为。以下是不应被代理的常见请求头列表：",[1044,2093,2094,2101,2112,2123],{},[1047,2095,2096,1030,2098],{},[1028,2097,1853],{},[1028,2099,2100],{},"accept",[1047,2102,2103,1030,2106,1030,2109],{},[1028,2104,2105],{},"content-length",[1028,2107,2108],{},"content-md5",[1028,2110,2111],{},"content-type",[1047,2113,2114,1030,2117,1030,2120],{},[1028,2115,2116],{},"x-forwarded-host",[1028,2118,2119],{},"x-forwarded-port",[1028,2121,2122],{},"x-forwarded-proto",[1047,2124,2125,1030,2128],{},[1028,2126,2127],{},"cf-connecting-ip",[1028,2129,2130],{},"cf-ray",[1087,2132,2134],{"id":2133},"usefetch",[1028,2135,453],{},[1024,2137,2138,2142,2143,2145],{},[1032,2139,2140],{"href":452},[1028,2141,453],{}," composable 在底层使用 ",[1028,2144,553],{}," 来在 setup 函数中发起 SSR 安全的网络调用。",[1148,2147,2149],{"className":1150,"code":2148,"filename":1152,"language":1153,"meta":1694,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data: count } = await useFetch('\u002Fapi\u002Fcount')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>Page visits: {{ count }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[1028,2150,2151,2171,2204,2212,2216,2224,2242],{"__ignoreMap":354},[1157,2152,2153,2155,2157,2159,2161,2163,2165,2167,2169],{"class":1159,"line":1160},[1157,2154,1164],{"class":1163},[1157,2156,1168],{"class":1167},[1157,2158,1172],{"class":1171},[1157,2160,1175],{"class":1171},[1157,2162,1178],{"class":1163},[1157,2164,1182],{"class":1181},[1157,2166,1186],{"class":1185},[1157,2168,1182],{"class":1181},[1157,2170,1191],{"class":1163},[1157,2172,2173,2175,2177,2180,2182,2185,2187,2189,2191,2193,2195,2197,2200,2202],{"class":1159,"line":1194},[1157,2174,1198],{"class":1197},[1157,2176,1201],{"class":1163},[1157,2178,1205],{"class":2179},"sP6_D",[1157,2181,1300],{"class":1163},[1157,2183,2184],{"class":1204}," count",[1157,2186,1208],{"class":1163},[1157,2188,1212],{"class":1211},[1157,2190,1216],{"class":1215},[1157,2192,1220],{"class":1219},[1157,2194,1224],{"class":1223},[1157,2196,1227],{"class":1181},[1157,2198,2199],{"class":1185},"\u002Fapi\u002Fcount",[1157,2201,1227],{"class":1181},[1157,2203,1235],{"class":1223},[1157,2205,2206,2208,2210],{"class":1159,"line":1238},[1157,2207,1354],{"class":1163},[1157,2209,1168],{"class":1167},[1157,2211,1191],{"class":1163},[1157,2213,2214],{"class":1159,"line":1245},[1157,2215,1242],{"emptyLinePlaceholder":1241},[1157,2217,2218,2220,2222],{"class":1159,"line":1263},[1157,2219,1164],{"class":1163},[1157,2221,1371],{"class":1167},[1157,2223,1191],{"class":1163},[1157,2225,2226,2228,2230,2233,2236,2238,2240],{"class":1159,"line":1294},[1157,2227,1379],{"class":1163},[1157,2229,1024],{"class":1167},[1157,2231,2232],{"class":1163},">",[1157,2234,2235],{"class":1223},"Page visits: {{ count }}",[1157,2237,1354],{"class":1163},[1157,2239,1024],{"class":1167},[1157,2241,1191],{"class":1163},[1157,2243,2244,2246,2248],{"class":1159,"line":1314},[1157,2245,1354],{"class":1163},[1157,2247,1371],{"class":1167},[1157,2249,1191],{"class":1163},[1024,2251,2252,2253,2257,2258,2260],{},"这个 composable 是对 ",[1032,2254,2255],{"href":440},[1028,2256,441],{}," composable 和 ",[1028,2259,553],{}," 工具的封装。",[2262,2263,2266],"video-accordion",{"title":2264,"video-id":2265},"观看 Alexander Lichter 的视频，避免错误地使用 useFetch","njsGVmcWviY",[1828,2267,2268],{"to":452},[2269,2270,2272,2277,2282,2303],"link-example",{"to":2271},"\u002Fdocs\u002Fexamples\u002Ffeatures\u002Fdata-fetching",[1087,2273,2275],{"id":2274},"useasyncdata",[1028,2276,441],{},[1024,2278,2279,2281],{},[1028,2280,441],{}," composable 负责包装异步逻辑，并在其解析后返回结果。",[1130,2283,2284],{},[1024,2285,2286,2289,2290,2293,2294,2298,2299,2302],{},[1028,2287,2288],{},"useFetch(url)"," 几乎等同于 ",[1028,2291,2292],{},"useAsyncData(url, () => event.$fetch(url))","。:br\n它是针对最常见用例的开发者体验（DX）语法糖。（你可以在 ",[1032,2295,2296],{"href":500},[1028,2297,501],{}," 了解更多关于 ",[1028,2300,2301],{},"event.fetch"," 的内容。）",[2262,2304,2307,2320,2453,2489,2627,2635,2855,2956,2962,2966,2973,3043,3061,3067,3088,3092,3103,3107,3116,3312,3322,3388,3394,3400],{"title":2305,"video-id":2306},"观看 Alexander Lichter 的视频，深入了解 useFetch 和 useAsyncData 的区别","0X-aOpSGabA",[1024,2308,2309,2310,2314,2315,2319],{},"有些情况下使用 ",[1032,2311,2312],{"href":452},[1028,2313,453],{}," composable 并不合适，例如当 CMS 或第三方提供它们自己的查询层时。在这种情况下，你可以使用 ",[1032,2316,2317],{"href":440},[1028,2318,441],{}," 来包装你的调用，同时仍然保留该 composable 提供的好处。",[1148,2321,2324],{"className":1150,"code":2322,"filename":2323,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data, error } = await useAsyncData('users', () => myGetFunction('users'))\n\n\u002F\u002F This is also possible:\nconst { data, error } = await useAsyncData(() => myGetFunction('users'))\n\u003C\u002Fscript>\n","app\u002Fpages\u002Fusers.vue",[1028,2325,2326,2346,2397,2401,2406,2445],{"__ignoreMap":354},[1157,2327,2328,2330,2332,2334,2336,2338,2340,2342,2344],{"class":1159,"line":1160},[1157,2329,1164],{"class":1163},[1157,2331,1168],{"class":1167},[1157,2333,1172],{"class":1171},[1157,2335,1175],{"class":1171},[1157,2337,1178],{"class":1163},[1157,2339,1182],{"class":1181},[1157,2341,1186],{"class":1185},[1157,2343,1182],{"class":1181},[1157,2345,1191],{"class":1163},[1157,2347,2348,2350,2352,2354,2356,2359,2361,2363,2365,2368,2370,2372,2375,2377,2379,2381,2383,2386,2388,2390,2392,2394],{"class":1159,"line":1194},[1157,2349,1198],{"class":1197},[1157,2351,1201],{"class":1163},[1157,2353,1205],{"class":1204},[1157,2355,1289],{"class":1163},[1157,2357,2358],{"class":1204}," error",[1157,2360,1208],{"class":1163},[1157,2362,1212],{"class":1211},[1157,2364,1216],{"class":1215},[1157,2366,2367],{"class":1219}," useAsyncData",[1157,2369,1224],{"class":1223},[1157,2371,1227],{"class":1181},[1157,2373,2374],{"class":1185},"users",[1157,2376,1227],{"class":1181},[1157,2378,1289],{"class":1163},[1157,2380,1257],{"class":1163},[1157,2382,1945],{"class":1197},[1157,2384,2385],{"class":1219}," myGetFunction",[1157,2387,1224],{"class":1223},[1157,2389,1227],{"class":1181},[1157,2391,2374],{"class":1185},[1157,2393,1227],{"class":1181},[1157,2395,2396],{"class":1223},"))\n",[1157,2398,2399],{"class":1159,"line":1238},[1157,2400,1242],{"emptyLinePlaceholder":1241},[1157,2402,2403],{"class":1159,"line":1245},[1157,2404,2405],{"class":1327},"\u002F\u002F This is also possible:\n",[1157,2407,2408,2410,2412,2414,2416,2418,2420,2422,2424,2426,2428,2431,2433,2435,2437,2439,2441,2443],{"class":1159,"line":1263},[1157,2409,1198],{"class":1197},[1157,2411,1201],{"class":1163},[1157,2413,1205],{"class":1204},[1157,2415,1289],{"class":1163},[1157,2417,2358],{"class":1204},[1157,2419,1208],{"class":1163},[1157,2421,1212],{"class":1211},[1157,2423,1216],{"class":1215},[1157,2425,2367],{"class":1219},[1157,2427,1224],{"class":1223},[1157,2429,2430],{"class":1163},"()",[1157,2432,1945],{"class":1197},[1157,2434,2385],{"class":1219},[1157,2436,1224],{"class":1223},[1157,2438,1227],{"class":1181},[1157,2440,2374],{"class":1185},[1157,2442,1227],{"class":1181},[1157,2444,2396],{"class":1223},[1157,2446,2447,2449,2451],{"class":1159,"line":1294},[1157,2448,1354],{"class":1163},[1157,2450,1168],{"class":1167},[1157,2452,1191],{"class":1163},[1508,2454,2455],{},[1024,2456,2457,2461,2462,1541,2465,2467,2468,2470,2471,2473,2474,1541,2476,2478,2479,2483,2484,2488],{},[1032,2458,2459],{"href":440},[1028,2460,441],{}," 的第一个参数是一个唯一 key，用于缓存第二个参数（查询函数）的响应。如果不传这个 key 而直接传入查询函数，key 会被自动生成。\n",[2463,2464],"br",{},[2463,2466],{},"\n由于自动生成的 key 只考虑 ",[1028,2469,441],{}," 被调用的位置，建议始终创建你自己的 key，以避免不期望的行为，例如当你创建包装 ",[1028,2472,441],{}," 的自定义 composable 时。\n",[2463,2475],{},[2463,2477],{},"\n设置一个 key 对于使用 ",[1032,2480,2481],{"href":488},[1028,2482,489],{}," 在组件之间共享相同数据，或",[1032,2485,2487],{"href":2486},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-nuxt-data#refresh-specific-data","刷新特定数据","很有用。",[1148,2490,2493],{"className":1150,"code":2491,"filename":2492,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { id } = useRoute().params\n\nconst { data, error } = await useAsyncData(`user:${id}`, () => {\n  return myGetFunction('users', { id })\n})\n\u003C\u002Fscript>\n","app\u002Fpages\u002Fusers\u002F[id].vue",[1028,2494,2495,2515,2539,2543,2588,2612,2619],{"__ignoreMap":354},[1157,2496,2497,2499,2501,2503,2505,2507,2509,2511,2513],{"class":1159,"line":1160},[1157,2498,1164],{"class":1163},[1157,2500,1168],{"class":1167},[1157,2502,1172],{"class":1171},[1157,2504,1175],{"class":1171},[1157,2506,1178],{"class":1163},[1157,2508,1182],{"class":1181},[1157,2510,1186],{"class":1185},[1157,2512,1182],{"class":1181},[1157,2514,1191],{"class":1163},[1157,2516,2517,2519,2521,2524,2526,2528,2531,2533,2536],{"class":1159,"line":1194},[1157,2518,1198],{"class":1197},[1157,2520,1201],{"class":1163},[1157,2522,2523],{"class":1204}," id",[1157,2525,1208],{"class":1163},[1157,2527,1212],{"class":1211},[1157,2529,2530],{"class":1219}," useRoute",[1157,2532,2430],{"class":1223},[1157,2534,2535],{"class":1163},".",[1157,2537,2538],{"class":1223},"params\n",[1157,2540,2541],{"class":1159,"line":1238},[1157,2542,1242],{"emptyLinePlaceholder":1241},[1157,2544,2545,2547,2549,2551,2553,2555,2557,2559,2561,2563,2565,2568,2571,2574,2577,2580,2582,2584,2586],{"class":1159,"line":1245},[1157,2546,1198],{"class":1197},[1157,2548,1201],{"class":1163},[1157,2550,1205],{"class":1204},[1157,2552,1289],{"class":1163},[1157,2554,2358],{"class":1204},[1157,2556,1208],{"class":1163},[1157,2558,1212],{"class":1211},[1157,2560,1216],{"class":1215},[1157,2562,2367],{"class":1219},[1157,2564,1224],{"class":1223},[1157,2566,2567],{"class":1181},"`",[1157,2569,2570],{"class":1185},"user:",[1157,2572,2573],{"class":1181},"${",[1157,2575,2576],{"class":1223},"id",[1157,2578,2579],{"class":1181},"}`",[1157,2581,1289],{"class":1163},[1157,2583,1257],{"class":1163},[1157,2585,1945],{"class":1197},[1157,2587,1260],{"class":1163},[1157,2589,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610],{"class":1159,"line":1263},[1157,2591,2040],{"class":1215},[1157,2593,2385],{"class":1219},[1157,2595,1224],{"class":1279},[1157,2597,1227],{"class":1181},[1157,2599,2374],{"class":1185},[1157,2601,1227],{"class":1181},[1157,2603,1289],{"class":1163},[1157,2605,1201],{"class":1163},[1157,2607,2523],{"class":1223},[1157,2609,1208],{"class":1163},[1157,2611,1235],{"class":1279},[1157,2613,2614,2617],{"class":1159,"line":1294},[1157,2615,2616],{"class":1163},"}",[1157,2618,1235],{"class":1223},[1157,2620,2621,2623,2625],{"class":1159,"line":1314},[1157,2622,1354],{"class":1163},[1157,2624,1168],{"class":1167},[1157,2626,1191],{"class":1163},[1024,2628,2629,2631,2632,2634],{},[1028,2630,441],{}," composable 是包装并等待多个 ",[1028,2633,553],{}," 请求完成，然后处理结果的绝佳方式。",[1148,2636,2638],{"className":1150,"code":2637,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data: discounts, status } = await useAsyncData('cart-discount', async (_nuxtApp, { signal }) => {\n  const [coupons, offers] = await Promise.all([\n    $fetch('\u002Fcart\u002Fcoupons', { signal }),\n    $fetch('\u002Fcart\u002Foffers', { signal }),\n  ])\n\n  return { coupons, offers }\n})\n\u002F\u002F discounts.value.coupons\n\u002F\u002F discounts.value.offers\n\u003C\u002Fscript>\n",[1028,2639,2640,2660,2720,2754,2781,2806,2811,2815,2831,2837,2842,2847],{"__ignoreMap":354},[1157,2641,2642,2644,2646,2648,2650,2652,2654,2656,2658],{"class":1159,"line":1160},[1157,2643,1164],{"class":1163},[1157,2645,1168],{"class":1167},[1157,2647,1172],{"class":1171},[1157,2649,1175],{"class":1171},[1157,2651,1178],{"class":1163},[1157,2653,1182],{"class":1181},[1157,2655,1186],{"class":1185},[1157,2657,1182],{"class":1181},[1157,2659,1191],{"class":1163},[1157,2661,2662,2664,2666,2668,2670,2673,2675,2678,2680,2682,2684,2686,2688,2690,2693,2695,2697,2700,2703,2706,2708,2710,2713,2716,2718],{"class":1159,"line":1194},[1157,2663,1198],{"class":1197},[1157,2665,1201],{"class":1163},[1157,2667,1205],{"class":2179},[1157,2669,1300],{"class":1163},[1157,2671,2672],{"class":1204}," discounts",[1157,2674,1289],{"class":1163},[1157,2676,2677],{"class":1204}," status",[1157,2679,1208],{"class":1163},[1157,2681,1212],{"class":1211},[1157,2683,1216],{"class":1215},[1157,2685,2367],{"class":1219},[1157,2687,1224],{"class":1223},[1157,2689,1227],{"class":1181},[1157,2691,2692],{"class":1185},"cart-discount",[1157,2694,1227],{"class":1181},[1157,2696,1289],{"class":1163},[1157,2698,2699],{"class":1197}," async",[1157,2701,2702],{"class":1163}," (",[1157,2704,2705],{"class":1941},"_nuxtApp",[1157,2707,1289],{"class":1163},[1157,2709,1201],{"class":1163},[1157,2711,2712],{"class":1941}," signal",[1157,2714,2715],{"class":1163}," })",[1157,2717,1945],{"class":1197},[1157,2719,1260],{"class":1163},[1157,2721,2722,2724,2727,2730,2732,2735,2738,2740,2742,2746,2748,2751],{"class":1159,"line":1238},[1157,2723,1266],{"class":1197},[1157,2725,2726],{"class":1163}," [",[1157,2728,2729],{"class":1204},"coupons",[1157,2731,1289],{"class":1163},[1157,2733,2734],{"class":1204}," offers",[1157,2736,2737],{"class":1163},"]",[1157,2739,1212],{"class":1211},[1157,2741,1216],{"class":1215},[1157,2743,2745],{"class":2744},"seQRr"," Promise",[1157,2747,2535],{"class":1163},[1157,2749,2750],{"class":1219},"all",[1157,2752,2753],{"class":1279},"([\n",[1157,2755,2756,2759,2761,2763,2766,2768,2770,2772,2774,2776,2779],{"class":1159,"line":1245},[1157,2757,2758],{"class":1219},"    $fetch",[1157,2760,1224],{"class":1279},[1157,2762,1227],{"class":1181},[1157,2764,2765],{"class":1185},"\u002Fcart\u002Fcoupons",[1157,2767,1227],{"class":1181},[1157,2769,1289],{"class":1163},[1157,2771,1201],{"class":1163},[1157,2773,2712],{"class":1223},[1157,2775,1208],{"class":1163},[1157,2777,2778],{"class":1279},")",[1157,2780,1311],{"class":1163},[1157,2782,2783,2785,2787,2789,2792,2794,2796,2798,2800,2802,2804],{"class":1159,"line":1263},[1157,2784,2758],{"class":1219},[1157,2786,1224],{"class":1279},[1157,2788,1227],{"class":1181},[1157,2790,2791],{"class":1185},"\u002Fcart\u002Foffers",[1157,2793,1227],{"class":1181},[1157,2795,1289],{"class":1163},[1157,2797,1201],{"class":1163},[1157,2799,2712],{"class":1223},[1157,2801,1208],{"class":1163},[1157,2803,2778],{"class":1279},[1157,2805,1311],{"class":1163},[1157,2807,2808],{"class":1159,"line":1294},[1157,2809,2810],{"class":1279},"  ])\n",[1157,2812,2813],{"class":1159,"line":1314},[1157,2814,1242],{"emptyLinePlaceholder":1241},[1157,2816,2817,2819,2821,2824,2826,2828],{"class":1159,"line":1324},[1157,2818,2040],{"class":1215},[1157,2820,1201],{"class":1163},[1157,2822,2823],{"class":1223}," coupons",[1157,2825,1289],{"class":1163},[1157,2827,2734],{"class":1223},[1157,2829,2830],{"class":1163}," }\n",[1157,2832,2833,2835],{"class":1159,"line":1331},[1157,2834,2616],{"class":1163},[1157,2836,1235],{"class":1223},[1157,2838,2839],{"class":1159,"line":1337},[1157,2840,2841],{"class":1327},"\u002F\u002F discounts.value.coupons\n",[1157,2843,2844],{"class":1159,"line":1345},[1157,2845,2846],{"class":1327},"\u002F\u002F discounts.value.offers\n",[1157,2848,2849,2851,2853],{"class":1159,"line":1351},[1157,2850,1354],{"class":1163},[1157,2852,1168],{"class":1167},[1157,2854,1191],{"class":1163},[1508,2856,2857,2867],{},[1024,2858,2859,2861,2862,2866],{},[1028,2860,441],{}," 用于获取和缓存数据，而不是用于触发副作用（如调用 Pinia actions），因为这可能导致不期望的行为，例如使用 nullish 值重复执行。如果你需要触发副作用，请使用 ",[1032,2863,2864],{"href":564},[1028,2865,565],{}," 工具来完成。",[1148,2868,2870],{"className":1150,"code":2869,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst offersStore = useOffersStore()\n\n\u002F\u002F you can't do this\nawait useAsyncData(() => offersStore.getOffer(route.params.slug))\n\u003C\u002Fscript>\n",[1028,2871,2872,2892,2907,2911,2916,2948],{"__ignoreMap":354},[1157,2873,2874,2876,2878,2880,2882,2884,2886,2888,2890],{"class":1159,"line":1160},[1157,2875,1164],{"class":1163},[1157,2877,1168],{"class":1167},[1157,2879,1172],{"class":1171},[1157,2881,1175],{"class":1171},[1157,2883,1178],{"class":1163},[1157,2885,1182],{"class":1181},[1157,2887,1186],{"class":1185},[1157,2889,1182],{"class":1181},[1157,2891,1191],{"class":1163},[1157,2893,2894,2896,2899,2901,2904],{"class":1159,"line":1194},[1157,2895,1198],{"class":1197},[1157,2897,2898],{"class":1204}," offersStore",[1157,2900,1212],{"class":1211},[1157,2902,2903],{"class":1219}," useOffersStore",[1157,2905,2906],{"class":1223},"()\n",[1157,2908,2909],{"class":1159,"line":1238},[1157,2910,1242],{"emptyLinePlaceholder":1241},[1157,2912,2913],{"class":1159,"line":1245},[1157,2914,2915],{"class":1327},"\u002F\u002F you can't do this\n",[1157,2917,2918,2920,2922,2924,2926,2928,2930,2932,2935,2938,2940,2943,2945],{"class":1159,"line":1263},[1157,2919,1524],{"class":1215},[1157,2921,2367],{"class":1219},[1157,2923,1224],{"class":1223},[1157,2925,2430],{"class":1163},[1157,2927,1945],{"class":1197},[1157,2929,2898],{"class":1223},[1157,2931,2535],{"class":1163},[1157,2933,2934],{"class":1219},"getOffer",[1157,2936,2937],{"class":1223},"(route",[1157,2939,2535],{"class":1163},[1157,2941,2942],{"class":1223},"params",[1157,2944,2535],{"class":1163},[1157,2946,2947],{"class":1223},"slug))\n",[1157,2949,2950,2952,2954],{"class":1159,"line":1294},[1157,2951,1354],{"class":1163},[1157,2953,1168],{"class":1167},[1157,2955,1191],{"class":1163},[1828,2957,2958],{"to":440},[1024,2959,1832,2960,1835],{},[1028,2961,441],{},[1087,2963,2965],{"id":2964},"返回值return-values","返回值（Return Values）",[1024,2967,2968,1036,2970,2972],{},[1028,2969,453],{},[1028,2971,441],{}," 具有下面列出的相同返回值。",[1044,2974,2975,2980,2994,3021,3026],{},[1047,2976,2977,2979],{},[1028,2978,1572],{},"：传入的异步函数的结果。",[1047,2981,2982,2985,2986,2989,2990,2993],{},[1028,2983,2984],{},"refresh","\u002F",[1028,2987,2988],{},"execute","：一个可用于刷新 ",[1028,2991,2992],{},"handler"," 函数返回数据的函数。",[1047,2995,2996,2999,3000,3002,3003,1615,3006,3009,3010,3002,3012,3014,3015,3002,3017,3020],{},[1028,2997,2998],{},"clear","：一个可用于将 ",[1028,3001,1572],{}," 设为 ",[1028,3004,3005],{},"undefined",[1028,3007,3008],{},"options.default()"," 的值，如果提供）的函数，它会将 ",[1028,3011,1595],{},[1028,3013,3005],{},"，将 ",[1028,3016,1592],{},[1028,3018,3019],{},"idle","，并将任何当前挂起的请求标记为已取消。",[1047,3022,3023,3025],{},[1028,3024,1595],{},"：如果数据获取失败，则为错误对象。",[1047,3027,3028,3030,3031,1030,3034,1030,3037,1030,3040,1854],{},[1028,3029,1592],{},"：一个指示数据请求状态的字符串（",[1028,3032,3033],{},"\"idle\"",[1028,3035,3036],{},"\"pending\"",[1028,3038,3039],{},"\"success\"",[1028,3041,3042],{},"\"error\"",[1508,3044,3045],{},[1024,3046,3047,1030,3049,1036,3051,3053,3054,3056,3057,3060],{},[1028,3048,1572],{},[1028,3050,1595],{},[1028,3052,1592],{}," 是 Vue refs，在 ",[1028,3055,1559],{}," 中通过 ",[1028,3058,3059],{},".value"," 访问。",[1024,3062,3063,3064,3066],{},"默认情况下，Nuxt 会等待一次 ",[1028,3065,2984],{}," 完成，然后才能再次执行。",[1508,3068,3069],{},[1024,3070,3071,3072,3075,3076,3079,3080,3082,3083,1141,3085,3087],{},"如果你没有在服务端获取数据（例如使用了 ",[1028,3073,3074],{},"server: false","），那么数据",[3077,3078,1544],"em",{},"被获取，直到 hydration 完成。这意味着即使在客户端 await ",[1028,3081,453],{},"，",[1028,3084,1572],{},[1028,3086,1559],{}," 中仍将保持 undefined。",[1087,3089,3091],{"id":3090},"选项options","选项（Options）",[1024,3093,3094,1036,3098,3102],{},[1032,3095,3096],{"href":440},[1028,3097,441],{},[1032,3099,3100],{"href":452},[1028,3101,453],{}," 返回相同的对象类型，并接受一组通用的选项作为最后一个参数。它们可以帮助你控制 composables 的行为，例如导航阻塞、缓存或执行。",[1492,3104,3106],{"id":3105},"懒加载lazy","懒加载（Lazy）",[1024,3108,3109,3110,3112,3113,3115],{},"默认情况下，数据获取 composables 会利用 Vue 的 Suspense，在异步函数解析完成之前等待，然后再导航到新页面。可以通过 ",[1028,3111,1608],{}," 选项在客户端导航时忽略此特性。在这种情况下，你必须使用 ",[1028,3114,1592],{}," 值手动处理加载状态。",[1148,3117,3119],{"className":1150,"code":3118,"filename":1152,"language":1153,"meta":1694,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { status, data: posts } = useFetch('\u002Fapi\u002Fposts', {\n  lazy: true,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- you will need to handle a loading state -->\n  \u003Cdiv v-if=\"status === 'pending'\">\n    Loading ...\n  \u003C\u002Fdiv>\n  \u003Cdiv v-else>\n    \u003Cdiv v-for=\"post in posts\">\n      \u003C!-- do something -->\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1028,3120,3121,3141,3177,3190,3196,3204,3208,3216,3221,3240,3245,3253,3263,3283,3288,3296,3304],{"__ignoreMap":354},[1157,3122,3123,3125,3127,3129,3131,3133,3135,3137,3139],{"class":1159,"line":1160},[1157,3124,1164],{"class":1163},[1157,3126,1168],{"class":1167},[1157,3128,1172],{"class":1171},[1157,3130,1175],{"class":1171},[1157,3132,1178],{"class":1163},[1157,3134,1182],{"class":1181},[1157,3136,1186],{"class":1185},[1157,3138,1182],{"class":1181},[1157,3140,1191],{"class":1163},[1157,3142,3143,3145,3147,3149,3151,3153,3155,3158,3160,3162,3164,3166,3168,3171,3173,3175],{"class":1159,"line":1194},[1157,3144,1198],{"class":1197},[1157,3146,1201],{"class":1163},[1157,3148,2677],{"class":1204},[1157,3150,1289],{"class":1163},[1157,3152,1205],{"class":2179},[1157,3154,1300],{"class":1163},[1157,3156,3157],{"class":1204}," posts",[1157,3159,1208],{"class":1163},[1157,3161,1212],{"class":1211},[1157,3163,1220],{"class":1219},[1157,3165,1224],{"class":1223},[1157,3167,1227],{"class":1181},[1157,3169,3170],{"class":1185},"\u002Fapi\u002Fposts",[1157,3172,1227],{"class":1181},[1157,3174,1289],{"class":1163},[1157,3176,1260],{"class":1163},[1157,3178,3179,3182,3184,3188],{"class":1159,"line":1238},[1157,3180,3181],{"class":1279},"  lazy",[1157,3183,1300],{"class":1163},[1157,3185,3187],{"class":3186},"si1Qm"," true",[1157,3189,1311],{"class":1163},[1157,3191,3192,3194],{"class":1159,"line":1245},[1157,3193,2616],{"class":1163},[1157,3195,1235],{"class":1223},[1157,3197,3198,3200,3202],{"class":1159,"line":1263},[1157,3199,1354],{"class":1163},[1157,3201,1168],{"class":1167},[1157,3203,1191],{"class":1163},[1157,3205,3206],{"class":1159,"line":1294},[1157,3207,1242],{"emptyLinePlaceholder":1241},[1157,3209,3210,3212,3214],{"class":1159,"line":1314},[1157,3211,1164],{"class":1163},[1157,3213,1371],{"class":1167},[1157,3215,1191],{"class":1163},[1157,3217,3218],{"class":1159,"line":1324},[1157,3219,3220],{"class":1327},"  \u003C!-- you will need to handle a loading state -->\n",[1157,3222,3223,3225,3227,3229,3231,3233,3236,3238],{"class":1159,"line":1331},[1157,3224,1379],{"class":1163},[1157,3226,1382],{"class":1167},[1157,3228,1385],{"class":1171},[1157,3230,1178],{"class":1163},[1157,3232,1182],{"class":1181},[1157,3234,3235],{"class":1185},"status === 'pending'",[1157,3237,1182],{"class":1181},[1157,3239,1191],{"class":1163},[1157,3241,3242],{"class":1159,"line":1337},[1157,3243,3244],{"class":1223},"    Loading ...\n",[1157,3246,3247,3249,3251],{"class":1159,"line":1345},[1157,3248,1408],{"class":1163},[1157,3250,1382],{"class":1167},[1157,3252,1191],{"class":1163},[1157,3254,3255,3257,3259,3261],{"class":1159,"line":1351},[1157,3256,1379],{"class":1163},[1157,3258,1382],{"class":1167},[1157,3260,1422],{"class":1171},[1157,3262,1191],{"class":1163},[1157,3264,3265,3267,3269,3272,3274,3276,3279,3281],{"class":1159,"line":1361},[1157,3266,1430],{"class":1163},[1157,3268,1382],{"class":1167},[1157,3270,3271],{"class":1171}," v-for",[1157,3273,1178],{"class":1163},[1157,3275,1182],{"class":1181},[1157,3277,3278],{"class":1185},"post in posts",[1157,3280,1182],{"class":1181},[1157,3282,1191],{"class":1163},[1157,3284,3285],{"class":1159,"line":1366},[1157,3286,3287],{"class":1327},"      \u003C!-- do something -->\n",[1157,3289,3290,3292,3294],{"class":1159,"line":1376},[1157,3291,1459],{"class":1163},[1157,3293,1382],{"class":1167},[1157,3295,1191],{"class":1163},[1157,3297,3298,3300,3302],{"class":1159,"line":1399},[1157,3299,1408],{"class":1163},[1157,3301,1382],{"class":1167},[1157,3303,1191],{"class":1163},[1157,3305,3306,3308,3310],{"class":1159,"line":1405},[1157,3307,1354],{"class":1163},[1157,3309,1371],{"class":1167},[1157,3311,1191],{"class":1163},[1024,3313,3314,3315,1036,3319,3321],{},"你也可以改用 ",[1032,3316,3317],{"href":476},[1028,3318,477],{},[1028,3320,473],{}," 作为便捷方法来实现相同的效果。",[1148,3323,3325],{"className":1150,"code":3324,"language":1153,"meta":1694,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { status, data: posts } = useLazyFetch('\u002Fapi\u002Fposts')\n\u003C\u002Fscript>\n",[1028,3326,3327,3347,3380],{"__ignoreMap":354},[1157,3328,3329,3331,3333,3335,3337,3339,3341,3343,3345],{"class":1159,"line":1160},[1157,3330,1164],{"class":1163},[1157,3332,1168],{"class":1167},[1157,3334,1172],{"class":1171},[1157,3336,1175],{"class":1171},[1157,3338,1178],{"class":1163},[1157,3340,1182],{"class":1181},[1157,3342,1186],{"class":1185},[1157,3344,1182],{"class":1181},[1157,3346,1191],{"class":1163},[1157,3348,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367,3370,3372,3374,3376,3378],{"class":1159,"line":1194},[1157,3350,1198],{"class":1197},[1157,3352,1201],{"class":1163},[1157,3354,2677],{"class":1204},[1157,3356,1289],{"class":1163},[1157,3358,1205],{"class":2179},[1157,3360,1300],{"class":1163},[1157,3362,3157],{"class":1204},[1157,3364,1208],{"class":1163},[1157,3366,1212],{"class":1211},[1157,3368,3369],{"class":1219}," useLazyFetch",[1157,3371,1224],{"class":1223},[1157,3373,1227],{"class":1181},[1157,3375,3170],{"class":1185},[1157,3377,1227],{"class":1181},[1157,3379,1235],{"class":1223},[1157,3381,3382,3384,3386],{"class":1159,"line":1238},[1157,3383,1354],{"class":1163},[1157,3385,1168],{"class":1167},[1157,3387,1191],{"class":1163},[1828,3389,3390],{"to":476},[1024,3391,1832,3392,1835],{},[1028,3393,477],{},[1828,3395,3396],{"to":472},[1024,3397,1832,3398,1835],{},[1028,3399,473],{},[2262,3401,3405,3409,3419,3425,3532,3543,3547,3553,3715,3722,3842,3851],{"title":3402,"video-id":3403,"platform":3404},"观看 Vue School 关于阻塞 vs. 非阻塞（lazy）请求 的视频","1022000555","vimeo",[1492,3406,3408],{"id":3407},"仅客户端获取client-only-fetching","仅客户端获取（Client-only fetching）",[1024,3410,3411,3412,3414,3415,3418],{},"默认情况下，数据获取 composables 会在客户端和服务端环境中执行它们的异步函数。将 ",[1028,3413,150],{}," 选项设为 ",[1028,3416,3417],{},"false"," 可以只在客户端执行调用。在初始加载时，数据在 hydration 完成之前不会被获取，因此你必须处理 pending 状态，不过在随后的客户端导航中，数据会在加载页面之前被 await。",[1024,3420,3421,3422,3424],{},"结合 ",[1028,3423,1608],{}," 选项，这对于首次渲染不需要的数据（例如对 SEO 不敏感的数据）很有用。",[1148,3426,3428],{"className":1917,"code":3427,"language":1186,"meta":1694,"style":354},"\u002F* This call is performed before hydration *\u002F\nconst articles = await useFetch('\u002Fapi\u002Farticle')\n\n\u002F* This call will only be performed on the client *\u002F\nconst { status, data: comments } = useFetch('\u002Fapi\u002Fcomments', {\n  lazy: true,\n  server: false,\n})\n",[1028,3429,3430,3435,3459,3463,3468,3504,3514,3526],{"__ignoreMap":354},[1157,3431,3432],{"class":1159,"line":1160},[1157,3433,3434],{"class":1327},"\u002F* This call is performed before hydration *\u002F\n",[1157,3436,3437,3439,3442,3444,3446,3448,3450,3452,3455,3457],{"class":1159,"line":1194},[1157,3438,1198],{"class":1197},[1157,3440,3441],{"class":1204}," articles",[1157,3443,1212],{"class":1211},[1157,3445,1216],{"class":1215},[1157,3447,1220],{"class":1219},[1157,3449,1224],{"class":1223},[1157,3451,1227],{"class":1181},[1157,3453,3454],{"class":1185},"\u002Fapi\u002Farticle",[1157,3456,1227],{"class":1181},[1157,3458,1235],{"class":1223},[1157,3460,3461],{"class":1159,"line":1238},[1157,3462,1242],{"emptyLinePlaceholder":1241},[1157,3464,3465],{"class":1159,"line":1245},[1157,3466,3467],{"class":1327},"\u002F* This call will only be performed on the client *\u002F\n",[1157,3469,3470,3472,3474,3476,3478,3480,3482,3485,3487,3489,3491,3493,3495,3498,3500,3502],{"class":1159,"line":1263},[1157,3471,1198],{"class":1197},[1157,3473,1201],{"class":1163},[1157,3475,2677],{"class":1204},[1157,3477,1289],{"class":1163},[1157,3479,1205],{"class":2179},[1157,3481,1300],{"class":1163},[1157,3483,3484],{"class":1204}," comments",[1157,3486,1208],{"class":1163},[1157,3488,1212],{"class":1211},[1157,3490,1220],{"class":1219},[1157,3492,1224],{"class":1223},[1157,3494,1227],{"class":1181},[1157,3496,3497],{"class":1185},"\u002Fapi\u002Fcomments",[1157,3499,1227],{"class":1181},[1157,3501,1289],{"class":1163},[1157,3503,1260],{"class":1163},[1157,3505,3506,3508,3510,3512],{"class":1159,"line":1294},[1157,3507,3181],{"class":1279},[1157,3509,1300],{"class":1163},[1157,3511,3187],{"class":3186},[1157,3513,1311],{"class":1163},[1157,3515,3516,3519,3521,3524],{"class":1159,"line":1314},[1157,3517,3518],{"class":1279},"  server",[1157,3520,1300],{"class":1163},[1157,3522,3523],{"class":3186}," false",[1157,3525,1311],{"class":1163},[1157,3527,3528,3530],{"class":1159,"line":1324},[1157,3529,2616],{"class":1163},[1157,3531,1235],{"class":1223},[1024,3533,3534,3536,3537,1039],{},[1028,3535,453],{}," composable 应在 setup 方法中调用，或在生命周期钩子里的函数中直接在顶层调用，否则你应该使用 ",[1032,3538,3540,3542],{"href":3539},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching#fetch",[1028,3541,553],{}," 方法",[1492,3544,3546],{"id":3545},"最小化-payload-体积minimize-payload-size","最小化 payload 体积（Minimize payload size）",[1024,3548,3549,3552],{},[1028,3550,3551],{},"pick"," 选项通过只选择你想从 composables 返回的字段，来帮助最小化存储在 HTML 文档中的 payload 体积。",[1148,3554,3556],{"className":1150,"code":3555,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\n\u002F* only pick the fields used in your template *\u002F\nconst { data: mountain } = await useFetch('\u002Fapi\u002Fmountains\u002Feverest', {\n  pick: ['title', 'description'],\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ mountain.title }}\u003C\u002Fh1>\n  \u003Cp>{{ mountain.description }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[1028,3557,3558,3578,3583,3617,3646,3652,3660,3664,3672,3690,3707],{"__ignoreMap":354},[1157,3559,3560,3562,3564,3566,3568,3570,3572,3574,3576],{"class":1159,"line":1160},[1157,3561,1164],{"class":1163},[1157,3563,1168],{"class":1167},[1157,3565,1172],{"class":1171},[1157,3567,1175],{"class":1171},[1157,3569,1178],{"class":1163},[1157,3571,1182],{"class":1181},[1157,3573,1186],{"class":1185},[1157,3575,1182],{"class":1181},[1157,3577,1191],{"class":1163},[1157,3579,3580],{"class":1159,"line":1194},[1157,3581,3582],{"class":1327},"\u002F* only pick the fields used in your template *\u002F\n",[1157,3584,3585,3587,3589,3591,3593,3596,3598,3600,3602,3604,3606,3608,3611,3613,3615],{"class":1159,"line":1238},[1157,3586,1198],{"class":1197},[1157,3588,1201],{"class":1163},[1157,3590,1205],{"class":2179},[1157,3592,1300],{"class":1163},[1157,3594,3595],{"class":1204}," mountain",[1157,3597,1208],{"class":1163},[1157,3599,1212],{"class":1211},[1157,3601,1216],{"class":1215},[1157,3603,1220],{"class":1219},[1157,3605,1224],{"class":1223},[1157,3607,1227],{"class":1181},[1157,3609,3610],{"class":1185},"\u002Fapi\u002Fmountains\u002Feverest",[1157,3612,1227],{"class":1181},[1157,3614,1289],{"class":1163},[1157,3616,1260],{"class":1163},[1157,3618,3619,3622,3624,3626,3628,3631,3633,3635,3637,3640,3642,3644],{"class":1159,"line":1245},[1157,3620,3621],{"class":1279},"  pick",[1157,3623,1300],{"class":1163},[1157,3625,2726],{"class":1223},[1157,3627,1227],{"class":1181},[1157,3629,3630],{"class":1185},"title",[1157,3632,1227],{"class":1181},[1157,3634,1289],{"class":1163},[1157,3636,1303],{"class":1181},[1157,3638,3639],{"class":1185},"description",[1157,3641,1227],{"class":1181},[1157,3643,2737],{"class":1223},[1157,3645,1311],{"class":1163},[1157,3647,3648,3650],{"class":1159,"line":1263},[1157,3649,2616],{"class":1163},[1157,3651,1235],{"class":1223},[1157,3653,3654,3656,3658],{"class":1159,"line":1294},[1157,3655,1354],{"class":1163},[1157,3657,1168],{"class":1167},[1157,3659,1191],{"class":1163},[1157,3661,3662],{"class":1159,"line":1314},[1157,3663,1242],{"emptyLinePlaceholder":1241},[1157,3665,3666,3668,3670],{"class":1159,"line":1324},[1157,3667,1164],{"class":1163},[1157,3669,1371],{"class":1167},[1157,3671,1191],{"class":1163},[1157,3673,3674,3676,3679,3681,3684,3686,3688],{"class":1159,"line":1331},[1157,3675,1379],{"class":1163},[1157,3677,3678],{"class":1167},"h1",[1157,3680,2232],{"class":1163},[1157,3682,3683],{"class":1223},"{{ mountain.title }}",[1157,3685,1354],{"class":1163},[1157,3687,3678],{"class":1167},[1157,3689,1191],{"class":1163},[1157,3691,3692,3694,3696,3698,3701,3703,3705],{"class":1159,"line":1337},[1157,3693,1379],{"class":1163},[1157,3695,1024],{"class":1167},[1157,3697,2232],{"class":1163},[1157,3699,3700],{"class":1223},"{{ mountain.description }}",[1157,3702,1354],{"class":1163},[1157,3704,1024],{"class":1167},[1157,3706,1191],{"class":1163},[1157,3708,3709,3711,3713],{"class":1159,"line":1345},[1157,3710,1354],{"class":1163},[1157,3712,1371],{"class":1167},[1157,3714,1191],{"class":1163},[1024,3716,3717,3718,3721],{},"如果你需要更多控制或要映射多个对象，可以使用 ",[1028,3719,3720],{},"transform"," 函数来更改查询的结果。",[1148,3723,3725],{"className":1917,"code":3724,"language":1186,"meta":354,"style":354},"const { data: mountains } = await useFetch('\u002Fapi\u002Fmountains', {\n  transform: (mountains) => {\n    return mountains.map(mountain => ({ title: mountain.title, description: mountain.description }))\n  },\n})\n",[1028,3726,3727,3761,3779,3831,3836],{"__ignoreMap":354},[1157,3728,3729,3731,3733,3735,3737,3740,3742,3744,3746,3748,3750,3752,3755,3757,3759],{"class":1159,"line":1160},[1157,3730,1198],{"class":1197},[1157,3732,1201],{"class":1163},[1157,3734,1205],{"class":2179},[1157,3736,1300],{"class":1163},[1157,3738,3739],{"class":1204}," mountains",[1157,3741,1208],{"class":1163},[1157,3743,1212],{"class":1211},[1157,3745,1216],{"class":1215},[1157,3747,1220],{"class":1219},[1157,3749,1224],{"class":1223},[1157,3751,1227],{"class":1181},[1157,3753,3754],{"class":1185},"\u002Fapi\u002Fmountains",[1157,3756,1227],{"class":1181},[1157,3758,1289],{"class":1163},[1157,3760,1260],{"class":1163},[1157,3762,3763,3766,3768,3770,3773,3775,3777],{"class":1159,"line":1194},[1157,3764,3765],{"class":1219},"  transform",[1157,3767,1300],{"class":1163},[1157,3769,2702],{"class":1163},[1157,3771,3772],{"class":1941},"mountains",[1157,3774,2778],{"class":1163},[1157,3776,1945],{"class":1197},[1157,3778,1260],{"class":1163},[1157,3780,3781,3784,3786,3788,3791,3793,3796,3798,3800,3803,3806,3808,3810,3812,3814,3816,3819,3821,3823,3825,3827,3829],{"class":1159,"line":1238},[1157,3782,3783],{"class":1215},"    return",[1157,3785,3739],{"class":1223},[1157,3787,2535],{"class":1163},[1157,3789,3790],{"class":1219},"map",[1157,3792,1224],{"class":1279},[1157,3794,3795],{"class":1941},"mountain",[1157,3797,1945],{"class":1197},[1157,3799,2702],{"class":1279},[1157,3801,3802],{"class":1163},"{",[1157,3804,3805],{"class":1279}," title",[1157,3807,1300],{"class":1163},[1157,3809,3595],{"class":1223},[1157,3811,2535],{"class":1163},[1157,3813,3630],{"class":1223},[1157,3815,1289],{"class":1163},[1157,3817,3818],{"class":1279}," description",[1157,3820,1300],{"class":1163},[1157,3822,3595],{"class":1223},[1157,3824,2535],{"class":1163},[1157,3826,3639],{"class":1223},[1157,3828,1208],{"class":1163},[1157,3830,2396],{"class":1279},[1157,3832,3833],{"class":1159,"line":1245},[1157,3834,3835],{"class":1163},"  },\n",[1157,3837,3838,3840],{"class":1159,"line":1263},[1157,3839,2616],{"class":1163},[1157,3841,1235],{"class":1223},[1508,3843,3844],{},[1024,3845,3846,1036,3848,3850],{},[1028,3847,3551],{},[1028,3849,3720],{}," 都无法阻止最初获取不需要的数据。但它们会阻止不需要的数据被添加到从服务端传输到客户端的 payload 中。",[2262,3852,3855,3859,3864,3875,3908,3917],{"title":3853,"video-id":3854,"platform":3404},"观看 Vue School 关于最小化 payload 体积的视频","1026410430",[1492,3856,3858],{"id":3857},"缓存与重新获取caching-and-refetching","缓存与重新获取（Caching and refetching）",[3860,3861,3863],"h4",{"id":3862},"键keys","键（Keys）",[1024,3865,3866,1036,3870,3874],{},[1032,3867,3868],{"href":452},[1028,3869,453],{},[1032,3871,3872],{"href":440},[1028,3873,441],{}," 使用 key 来防止重新获取相同的数据。",[1044,3876,3877,3898],{},[1047,3878,3879,3883,3884,3886,3887,3890,3891,3894,3895,1039],{},[1032,3880,3881],{"href":452},[1028,3882,453],{}," 从 URL、fetch 选项以及调用在你源代码中的位置生成一个 key。这意味着在不同组件中使用相同 URL 的两个 ",[1028,3885,453],{}," 调用具有",[1143,3888,3889],{},"不同","的 key，并且各自会发起自己的请求。要在多个组件之间共享相同的数据，请在作为最后一个参数传入的 ",[1028,3892,3893],{},"options"," 对象中提供相同的显式 ",[1028,3896,3897],{},"key",[1047,3899,3900,3904,3905,3907],{},[1032,3901,3902],{"href":440},[1028,3903,441],{}," 如果第一个参数是字符串，则将其用作 key。如果第一个参数是执行查询的 handler 函数，则会为你生成一个在源代码中 ",[1028,3906,441],{}," 调用位置唯一的 key。",[1130,3909,3910],{},[1024,3911,3912,3913,1039],{},"要通过 key 获取缓存的数据，你可以使用 ",[1032,3914,3915],{"href":488},[1028,3916,489],{},[2262,3918,3921,3925,3940,3947,3979,4146,4152,4177,4340,4343,4479,4483,4486,4631,4635,4643,4803,4816,4829,4833,4841,4993,4997,5007,5121,5128,5242,5249,5256,5377,5381,5384,5499,5508,5515,5827,5834,5838,5847,5856,6084,6090,6114,6118,6127,6133,6145,6149,6152,6367,6500,6504,6514,6627,6637],{"title":3919,"video-id":3920,"platform":3404},"观看 Vue School 关于使用 key 选项缓存数据的视频","1026410044",[3860,3922,3924],{"id":3923},"共享状态与选项一致性shared-state-and-option-consistency","共享状态与选项一致性（Shared State and Option Consistency）",[1024,3926,3927,3928,1648,3930,3932,3933,1030,3935,1036,3937,3939],{},"当多个组件对 ",[1028,3929,441],{},[1028,3931,453],{}," 使用相同的 key 时，它们会共享相同的 ",[1028,3934,1572],{},[1028,3936,1595],{},[1028,3938,1592],{}," refs。这确保了组件之间的一致性，但要求某些选项保持一致。",[1024,3941,3942,3943,3946],{},"以下选项在所有具有相同 key 的调用中",[1143,3944,3945],{},"必须一致","：",[1044,3948,3949,3953,3959,3963,3968,3973],{},[1047,3950,3951,1102],{},[1028,3952,2992],{},[1047,3954,3955,3958],{},[1028,3956,3957],{},"deep"," 选项",[1047,3960,3961,1102],{},[1028,3962,3720],{},[1047,3964,3965,3967],{},[1028,3966,3551],{}," 数组",[1047,3969,3970,1102],{},[1028,3971,3972],{},"getCachedData",[1047,3974,3975,3978],{},[1028,3976,3977],{},"default"," 值",[1148,3980,3982],{"className":1917,"code":3981,"language":1186,"meta":354,"style":354},"\u002F\u002F ❌ This will trigger a development warning\nconst { data: users1 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('\u002Fapi\u002Fusers', { signal }), { deep: false })\nconst { data: users2 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('\u002Fapi\u002Fusers', { signal }), { deep: true })\n",[1028,3983,3984,3989,4069],{"__ignoreMap":354},[1157,3985,3986],{"class":1159,"line":1160},[1157,3987,3988],{"class":1327},"\u002F\u002F ❌ This will trigger a development warning\n",[1157,3990,3991,3993,3995,3997,3999,4002,4004,4006,4008,4010,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030,4032,4034,4036,4038,4041,4043,4045,4047,4050,4052,4054,4056,4058,4061,4063,4065,4067],{"class":1159,"line":1194},[1157,3992,1198],{"class":1197},[1157,3994,1201],{"class":1163},[1157,3996,1205],{"class":2179},[1157,3998,1300],{"class":1163},[1157,4000,4001],{"class":1204}," users1",[1157,4003,1208],{"class":1163},[1157,4005,1212],{"class":1211},[1157,4007,2367],{"class":1219},[1157,4009,1224],{"class":1223},[1157,4011,1227],{"class":1181},[1157,4013,2374],{"class":1185},[1157,4015,1227],{"class":1181},[1157,4017,1289],{"class":1163},[1157,4019,2702],{"class":1163},[1157,4021,2705],{"class":1941},[1157,4023,1289],{"class":1163},[1157,4025,1201],{"class":1163},[1157,4027,2712],{"class":1941},[1157,4029,2715],{"class":1163},[1157,4031,1945],{"class":1197},[1157,4033,1276],{"class":1219},[1157,4035,1224],{"class":1223},[1157,4037,1227],{"class":1181},[1157,4039,4040],{"class":1185},"\u002Fapi\u002Fusers",[1157,4042,1227],{"class":1181},[1157,4044,1289],{"class":1163},[1157,4046,1201],{"class":1163},[1157,4048,4049],{"class":1223}," signal ",[1157,4051,2616],{"class":1163},[1157,4053,2778],{"class":1223},[1157,4055,1289],{"class":1163},[1157,4057,1201],{"class":1163},[1157,4059,4060],{"class":1279}," deep",[1157,4062,1300],{"class":1163},[1157,4064,3523],{"class":3186},[1157,4066,1208],{"class":1163},[1157,4068,1235],{"class":1223},[1157,4070,4071,4073,4075,4077,4079,4082,4084,4086,4088,4090,4092,4094,4096,4098,4100,4102,4104,4106,4108,4110,4112,4114,4116,4118,4120,4122,4124,4126,4128,4130,4132,4134,4136,4138,4140,4142,4144],{"class":1159,"line":1238},[1157,4072,1198],{"class":1197},[1157,4074,1201],{"class":1163},[1157,4076,1205],{"class":2179},[1157,4078,1300],{"class":1163},[1157,4080,4081],{"class":1204}," users2",[1157,4083,1208],{"class":1163},[1157,4085,1212],{"class":1211},[1157,4087,2367],{"class":1219},[1157,4089,1224],{"class":1223},[1157,4091,1227],{"class":1181},[1157,4093,2374],{"class":1185},[1157,4095,1227],{"class":1181},[1157,4097,1289],{"class":1163},[1157,4099,2702],{"class":1163},[1157,4101,2705],{"class":1941},[1157,4103,1289],{"class":1163},[1157,4105,1201],{"class":1163},[1157,4107,2712],{"class":1941},[1157,4109,2715],{"class":1163},[1157,4111,1945],{"class":1197},[1157,4113,1276],{"class":1219},[1157,4115,1224],{"class":1223},[1157,4117,1227],{"class":1181},[1157,4119,4040],{"class":1185},[1157,4121,1227],{"class":1181},[1157,4123,1289],{"class":1163},[1157,4125,1201],{"class":1163},[1157,4127,4049],{"class":1223},[1157,4129,2616],{"class":1163},[1157,4131,2778],{"class":1223},[1157,4133,1289],{"class":1163},[1157,4135,1201],{"class":1163},[1157,4137,4060],{"class":1279},[1157,4139,1300],{"class":1163},[1157,4141,3187],{"class":3186},[1157,4143,1208],{"class":1163},[1157,4145,1235],{"class":1223},[1024,4147,4148,4149,3946],{},"以下选项在无需触发警告的情况下",[1143,4150,4151],{},"可以安全不同",[1044,4153,4154,4158,4162,4167,4172],{},[1047,4155,4156],{},[1028,4157,150],{},[1047,4159,4160],{},[1028,4161,1608],{},[1047,4163,4164],{},[1028,4165,4166],{},"immediate",[1047,4168,4169],{},[1028,4170,4171],{},"dedupe",[1047,4173,4174],{},[1028,4175,4176],{},"watch",[1148,4178,4180],{"className":1917,"code":4179,"language":1186,"meta":354,"style":354},"\u002F\u002F ✅ This is allowed\nconst { data: users1 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('\u002Fapi\u002Fusers', { signal }), { immediate: true })\nconst { data: users2 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('\u002Fapi\u002Fusers', { signal }), { immediate: false })\n",[1028,4181,4182,4187,4264],{"__ignoreMap":354},[1157,4183,4184],{"class":1159,"line":1160},[1157,4185,4186],{"class":1327},"\u002F\u002F ✅ This is allowed\n",[1157,4188,4189,4191,4193,4195,4197,4199,4201,4203,4205,4207,4209,4211,4213,4215,4217,4219,4221,4223,4225,4227,4229,4231,4233,4235,4237,4239,4241,4243,4245,4247,4249,4251,4253,4256,4258,4260,4262],{"class":1159,"line":1194},[1157,4190,1198],{"class":1197},[1157,4192,1201],{"class":1163},[1157,4194,1205],{"class":2179},[1157,4196,1300],{"class":1163},[1157,4198,4001],{"class":1204},[1157,4200,1208],{"class":1163},[1157,4202,1212],{"class":1211},[1157,4204,2367],{"class":1219},[1157,4206,1224],{"class":1223},[1157,4208,1227],{"class":1181},[1157,4210,2374],{"class":1185},[1157,4212,1227],{"class":1181},[1157,4214,1289],{"class":1163},[1157,4216,2702],{"class":1163},[1157,4218,2705],{"class":1941},[1157,4220,1289],{"class":1163},[1157,4222,1201],{"class":1163},[1157,4224,2712],{"class":1941},[1157,4226,2715],{"class":1163},[1157,4228,1945],{"class":1197},[1157,4230,1276],{"class":1219},[1157,4232,1224],{"class":1223},[1157,4234,1227],{"class":1181},[1157,4236,4040],{"class":1185},[1157,4238,1227],{"class":1181},[1157,4240,1289],{"class":1163},[1157,4242,1201],{"class":1163},[1157,4244,4049],{"class":1223},[1157,4246,2616],{"class":1163},[1157,4248,2778],{"class":1223},[1157,4250,1289],{"class":1163},[1157,4252,1201],{"class":1163},[1157,4254,4255],{"class":1279}," immediate",[1157,4257,1300],{"class":1163},[1157,4259,3187],{"class":3186},[1157,4261,1208],{"class":1163},[1157,4263,1235],{"class":1223},[1157,4265,4266,4268,4270,4272,4274,4276,4278,4280,4282,4284,4286,4288,4290,4292,4294,4296,4298,4300,4302,4304,4306,4308,4310,4312,4314,4316,4318,4320,4322,4324,4326,4328,4330,4332,4334,4336,4338],{"class":1159,"line":1238},[1157,4267,1198],{"class":1197},[1157,4269,1201],{"class":1163},[1157,4271,1205],{"class":2179},[1157,4273,1300],{"class":1163},[1157,4275,4081],{"class":1204},[1157,4277,1208],{"class":1163},[1157,4279,1212],{"class":1211},[1157,4281,2367],{"class":1219},[1157,4283,1224],{"class":1223},[1157,4285,1227],{"class":1181},[1157,4287,2374],{"class":1185},[1157,4289,1227],{"class":1181},[1157,4291,1289],{"class":1163},[1157,4293,2702],{"class":1163},[1157,4295,2705],{"class":1941},[1157,4297,1289],{"class":1163},[1157,4299,1201],{"class":1163},[1157,4301,2712],{"class":1941},[1157,4303,2715],{"class":1163},[1157,4305,1945],{"class":1197},[1157,4307,1276],{"class":1219},[1157,4309,1224],{"class":1223},[1157,4311,1227],{"class":1181},[1157,4313,4040],{"class":1185},[1157,4315,1227],{"class":1181},[1157,4317,1289],{"class":1163},[1157,4319,1201],{"class":1163},[1157,4321,4049],{"class":1223},[1157,4323,2616],{"class":1163},[1157,4325,2778],{"class":1223},[1157,4327,1289],{"class":1163},[1157,4329,1201],{"class":1163},[1157,4331,4255],{"class":1279},[1157,4333,1300],{"class":1163},[1157,4335,3523],{"class":3186},[1157,4337,1208],{"class":1163},[1157,4339,1235],{"class":1223},[1024,4341,4342],{},"如果你需要独立的实例，请使用不同的 key：",[1148,4344,4346],{"className":1917,"code":4345,"language":1186,"meta":354,"style":354},"\u002F\u002F These are completely independent instances\nconst { data: users1 } = useAsyncData('users-1', (_nuxtApp, { signal }) => $fetch('\u002Fapi\u002Fusers', { signal }))\nconst { data: users2 } = useAsyncData('users-2', (_nuxtApp, { signal }) => $fetch('\u002Fapi\u002Fusers', { signal }))\n",[1028,4347,4348,4353,4416],{"__ignoreMap":354},[1157,4349,4350],{"class":1159,"line":1160},[1157,4351,4352],{"class":1327},"\u002F\u002F These are completely independent instances\n",[1157,4354,4355,4357,4359,4361,4363,4365,4367,4369,4371,4373,4375,4378,4380,4382,4384,4386,4388,4390,4392,4394,4396,4398,4400,4402,4404,4406,4408,4410,4412,4414],{"class":1159,"line":1194},[1157,4356,1198],{"class":1197},[1157,4358,1201],{"class":1163},[1157,4360,1205],{"class":2179},[1157,4362,1300],{"class":1163},[1157,4364,4001],{"class":1204},[1157,4366,1208],{"class":1163},[1157,4368,1212],{"class":1211},[1157,4370,2367],{"class":1219},[1157,4372,1224],{"class":1223},[1157,4374,1227],{"class":1181},[1157,4376,4377],{"class":1185},"users-1",[1157,4379,1227],{"class":1181},[1157,4381,1289],{"class":1163},[1157,4383,2702],{"class":1163},[1157,4385,2705],{"class":1941},[1157,4387,1289],{"class":1163},[1157,4389,1201],{"class":1163},[1157,4391,2712],{"class":1941},[1157,4393,2715],{"class":1163},[1157,4395,1945],{"class":1197},[1157,4397,1276],{"class":1219},[1157,4399,1224],{"class":1223},[1157,4401,1227],{"class":1181},[1157,4403,4040],{"class":1185},[1157,4405,1227],{"class":1181},[1157,4407,1289],{"class":1163},[1157,4409,1201],{"class":1163},[1157,4411,4049],{"class":1223},[1157,4413,2616],{"class":1163},[1157,4415,2396],{"class":1223},[1157,4417,4418,4420,4422,4424,4426,4428,4430,4432,4434,4436,4438,4441,4443,4445,4447,4449,4451,4453,4455,4457,4459,4461,4463,4465,4467,4469,4471,4473,4475,4477],{"class":1159,"line":1238},[1157,4419,1198],{"class":1197},[1157,4421,1201],{"class":1163},[1157,4423,1205],{"class":2179},[1157,4425,1300],{"class":1163},[1157,4427,4081],{"class":1204},[1157,4429,1208],{"class":1163},[1157,4431,1212],{"class":1211},[1157,4433,2367],{"class":1219},[1157,4435,1224],{"class":1223},[1157,4437,1227],{"class":1181},[1157,4439,4440],{"class":1185},"users-2",[1157,4442,1227],{"class":1181},[1157,4444,1289],{"class":1163},[1157,4446,2702],{"class":1163},[1157,4448,2705],{"class":1941},[1157,4450,1289],{"class":1163},[1157,4452,1201],{"class":1163},[1157,4454,2712],{"class":1941},[1157,4456,2715],{"class":1163},[1157,4458,1945],{"class":1197},[1157,4460,1276],{"class":1219},[1157,4462,1224],{"class":1223},[1157,4464,1227],{"class":1181},[1157,4466,4040],{"class":1185},[1157,4468,1227],{"class":1181},[1157,4470,1289],{"class":1163},[1157,4472,1201],{"class":1163},[1157,4474,4049],{"class":1223},[1157,4476,2616],{"class":1163},[1157,4478,2396],{"class":1223},[3860,4480,4482],{"id":4481},"响应式键reactive-keys","响应式键（Reactive Keys）",[1024,4484,4485],{},"你可以使用 computed refs、普通 refs 或 getter 函数作为 key，从而实现动态数据获取，并在依赖项变化时自动更新：",[1148,4487,4489],{"className":1917,"code":4488,"language":1186,"meta":354,"style":354},"\u002F\u002F Using a computed property as a key\nconst userId = ref('123')\nconst { data: user } = useAsyncData(\n  computed(() => `user-${userId.value}`),\n  () => fetchUser(userId.value),\n)\n\n\u002F\u002F When userId changes, the data will be automatically refetched\n\u002F\u002F and the old data will be cleaned up if no other components use it\nuserId.value = '456'\n",[1028,4490,4491,4496,4519,4541,4574,4594,4598,4602,4607,4612],{"__ignoreMap":354},[1157,4492,4493],{"class":1159,"line":1160},[1157,4494,4495],{"class":1327},"\u002F\u002F Using a computed property as a key\n",[1157,4497,4498,4500,4503,4505,4508,4510,4512,4515,4517],{"class":1159,"line":1194},[1157,4499,1198],{"class":1197},[1157,4501,4502],{"class":1204}," userId",[1157,4504,1212],{"class":1211},[1157,4506,4507],{"class":1219}," ref",[1157,4509,1224],{"class":1223},[1157,4511,1227],{"class":1181},[1157,4513,4514],{"class":1185},"123",[1157,4516,1227],{"class":1181},[1157,4518,1235],{"class":1223},[1157,4520,4521,4523,4525,4527,4529,4532,4534,4536,4538],{"class":1159,"line":1238},[1157,4522,1198],{"class":1197},[1157,4524,1201],{"class":1163},[1157,4526,1205],{"class":2179},[1157,4528,1300],{"class":1163},[1157,4530,4531],{"class":1204}," user",[1157,4533,1208],{"class":1163},[1157,4535,1212],{"class":1211},[1157,4537,2367],{"class":1219},[1157,4539,4540],{"class":1223},"(\n",[1157,4542,4543,4546,4548,4550,4552,4555,4558,4560,4563,4565,4568,4570,4572],{"class":1159,"line":1245},[1157,4544,4545],{"class":1219},"  computed",[1157,4547,1224],{"class":1223},[1157,4549,2430],{"class":1163},[1157,4551,1945],{"class":1197},[1157,4553,4554],{"class":1181}," `",[1157,4556,4557],{"class":1185},"user-",[1157,4559,2573],{"class":1181},[1157,4561,4562],{"class":1223},"userId",[1157,4564,2535],{"class":1181},[1157,4566,4567],{"class":1223},"value",[1157,4569,2579],{"class":1181},[1157,4571,2778],{"class":1223},[1157,4573,1311],{"class":1163},[1157,4575,4576,4579,4581,4584,4587,4589,4592],{"class":1159,"line":1263},[1157,4577,4578],{"class":1163},"  ()",[1157,4580,1945],{"class":1197},[1157,4582,4583],{"class":1219}," fetchUser",[1157,4585,4586],{"class":1223},"(userId",[1157,4588,2535],{"class":1163},[1157,4590,4591],{"class":1223},"value)",[1157,4593,1311],{"class":1163},[1157,4595,4596],{"class":1159,"line":1294},[1157,4597,1235],{"class":1223},[1157,4599,4600],{"class":1159,"line":1314},[1157,4601,1242],{"emptyLinePlaceholder":1241},[1157,4603,4604],{"class":1159,"line":1324},[1157,4605,4606],{"class":1327},"\u002F\u002F When userId changes, the data will be automatically refetched\n",[1157,4608,4609],{"class":1159,"line":1331},[1157,4610,4611],{"class":1327},"\u002F\u002F and the old data will be cleaned up if no other components use it\n",[1157,4613,4614,4616,4618,4621,4623,4625,4628],{"class":1159,"line":1337},[1157,4615,4562],{"class":1223},[1157,4617,2535],{"class":1163},[1157,4619,4620],{"class":1223},"value ",[1157,4622,1178],{"class":1211},[1157,4624,1303],{"class":1181},[1157,4626,4627],{"class":1185},"456",[1157,4629,4630],{"class":1181},"'\n",[3860,4632,4634],{"id":4633},"刷新与执行refresh-and-execute","刷新与执行（Refresh and execute）",[1024,4636,4637,4638,1648,4640,4642],{},"如果你想手动获取或刷新数据，请使用 composables 提供的 ",[1028,4639,2988],{},[1028,4641,2984],{}," 函数。",[1148,4644,4646],{"className":1150,"code":4645,"language":1153,"meta":1694,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data, error, execute, refresh } = await useFetch('\u002Fapi\u002Fusers')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>{{ data }}\u003C\u002Fp>\n    \u003Cbutton @click=\"() => refresh()\">\n      Refresh data\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1028,4647,4648,4668,4708,4716,4720,4728,4736,4753,4774,4779,4787,4795],{"__ignoreMap":354},[1157,4649,4650,4652,4654,4656,4658,4660,4662,4664,4666],{"class":1159,"line":1160},[1157,4651,1164],{"class":1163},[1157,4653,1168],{"class":1167},[1157,4655,1172],{"class":1171},[1157,4657,1175],{"class":1171},[1157,4659,1178],{"class":1163},[1157,4661,1182],{"class":1181},[1157,4663,1186],{"class":1185},[1157,4665,1182],{"class":1181},[1157,4667,1191],{"class":1163},[1157,4669,4670,4672,4674,4676,4678,4680,4682,4685,4687,4690,4692,4694,4696,4698,4700,4702,4704,4706],{"class":1159,"line":1194},[1157,4671,1198],{"class":1197},[1157,4673,1201],{"class":1163},[1157,4675,1205],{"class":1204},[1157,4677,1289],{"class":1163},[1157,4679,2358],{"class":1204},[1157,4681,1289],{"class":1163},[1157,4683,4684],{"class":1204}," execute",[1157,4686,1289],{"class":1163},[1157,4688,4689],{"class":1204}," refresh",[1157,4691,1208],{"class":1163},[1157,4693,1212],{"class":1211},[1157,4695,1216],{"class":1215},[1157,4697,1220],{"class":1219},[1157,4699,1224],{"class":1223},[1157,4701,1227],{"class":1181},[1157,4703,4040],{"class":1185},[1157,4705,1227],{"class":1181},[1157,4707,1235],{"class":1223},[1157,4709,4710,4712,4714],{"class":1159,"line":1238},[1157,4711,1354],{"class":1163},[1157,4713,1168],{"class":1167},[1157,4715,1191],{"class":1163},[1157,4717,4718],{"class":1159,"line":1245},[1157,4719,1242],{"emptyLinePlaceholder":1241},[1157,4721,4722,4724,4726],{"class":1159,"line":1263},[1157,4723,1164],{"class":1163},[1157,4725,1371],{"class":1167},[1157,4727,1191],{"class":1163},[1157,4729,4730,4732,4734],{"class":1159,"line":1294},[1157,4731,1379],{"class":1163},[1157,4733,1382],{"class":1167},[1157,4735,1191],{"class":1163},[1157,4737,4738,4740,4742,4744,4747,4749,4751],{"class":1159,"line":1314},[1157,4739,1430],{"class":1163},[1157,4741,1024],{"class":1167},[1157,4743,2232],{"class":1163},[1157,4745,4746],{"class":1223},"{{ data }}",[1157,4748,1354],{"class":1163},[1157,4750,1024],{"class":1167},[1157,4752,1191],{"class":1163},[1157,4754,4755,4757,4760,4763,4765,4767,4770,4772],{"class":1159,"line":1324},[1157,4756,1430],{"class":1163},[1157,4758,4759],{"class":1167},"button",[1157,4761,4762],{"class":1171}," @click",[1157,4764,1178],{"class":1163},[1157,4766,1182],{"class":1181},[1157,4768,4769],{"class":1185},"() => refresh()",[1157,4771,1182],{"class":1181},[1157,4773,1191],{"class":1163},[1157,4775,4776],{"class":1159,"line":1331},[1157,4777,4778],{"class":1223},"      Refresh data\n",[1157,4780,4781,4783,4785],{"class":1159,"line":1337},[1157,4782,1459],{"class":1163},[1157,4784,4759],{"class":1167},[1157,4786,1191],{"class":1163},[1157,4788,4789,4791,4793],{"class":1159,"line":1345},[1157,4790,1408],{"class":1163},[1157,4792,1382],{"class":1167},[1157,4794,1191],{"class":1163},[1157,4796,4797,4799,4801],{"class":1159,"line":1351},[1157,4798,1354],{"class":1163},[1157,4800,1371],{"class":1167},[1157,4802,1191],{"class":1163},[1024,4804,4805,4807,4808,4810,4811,4815],{},[1028,4806,2988],{}," 函数是 ",[1028,4809,2984],{}," 的别名，工作方式完全相同，但在获取",[1032,4812,4814],{"href":4813},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching#not-immediate","不是立即执行","的情况下语义更清晰。",[1130,4817,4818],{},[1024,4819,4820,4821,1036,4825,1039],{},"要全局重新获取或使缓存数据失效，请参阅 ",[1032,4822,4823],{"href":572},[1028,4824,573],{},[1032,4826,4827],{"href":644},[1028,4828,645],{},[3860,4830,4832],{"id":4831},"清除clear","清除（Clear）",[1024,4834,4835,4836,4838,4839,4642],{},"如果你出于任何原因想要清除提供的数据，而不需要知道要传递给 ",[1028,4837,573],{}," 的具体 key，可以使用 composables 提供的 ",[1028,4840,2998],{},[1148,4842,4844],{"className":1150,"code":4843,"language":1153,"meta":1694,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data, clear } = await useFetch('\u002Fapi\u002Fusers')\n\nconst route = useRoute()\nwatch(() => route.path, (path) => {\n  if (path === '\u002F') {\n    clear()\n  }\n})\n\u003C\u002Fscript>\n",[1028,4845,4846,4866,4897,4901,4914,4943,4967,4974,4979,4985],{"__ignoreMap":354},[1157,4847,4848,4850,4852,4854,4856,4858,4860,4862,4864],{"class":1159,"line":1160},[1157,4849,1164],{"class":1163},[1157,4851,1168],{"class":1167},[1157,4853,1172],{"class":1171},[1157,4855,1175],{"class":1171},[1157,4857,1178],{"class":1163},[1157,4859,1182],{"class":1181},[1157,4861,1186],{"class":1185},[1157,4863,1182],{"class":1181},[1157,4865,1191],{"class":1163},[1157,4867,4868,4870,4872,4874,4876,4879,4881,4883,4885,4887,4889,4891,4893,4895],{"class":1159,"line":1194},[1157,4869,1198],{"class":1197},[1157,4871,1201],{"class":1163},[1157,4873,1205],{"class":1204},[1157,4875,1289],{"class":1163},[1157,4877,4878],{"class":1204}," clear",[1157,4880,1208],{"class":1163},[1157,4882,1212],{"class":1211},[1157,4884,1216],{"class":1215},[1157,4886,1220],{"class":1219},[1157,4888,1224],{"class":1223},[1157,4890,1227],{"class":1181},[1157,4892,4040],{"class":1185},[1157,4894,1227],{"class":1181},[1157,4896,1235],{"class":1223},[1157,4898,4899],{"class":1159,"line":1238},[1157,4900,1242],{"emptyLinePlaceholder":1241},[1157,4902,4903,4905,4908,4910,4912],{"class":1159,"line":1245},[1157,4904,1198],{"class":1197},[1157,4906,4907],{"class":1204}," route",[1157,4909,1212],{"class":1211},[1157,4911,2530],{"class":1219},[1157,4913,2906],{"class":1223},[1157,4915,4916,4918,4920,4922,4924,4926,4928,4931,4933,4935,4937,4939,4941],{"class":1159,"line":1263},[1157,4917,4176],{"class":1219},[1157,4919,1224],{"class":1223},[1157,4921,2430],{"class":1163},[1157,4923,1945],{"class":1197},[1157,4925,4907],{"class":1223},[1157,4927,2535],{"class":1163},[1157,4929,4930],{"class":1223},"path",[1157,4932,1289],{"class":1163},[1157,4934,2702],{"class":1163},[1157,4936,4930],{"class":1941},[1157,4938,2778],{"class":1163},[1157,4940,1945],{"class":1197},[1157,4942,1260],{"class":1163},[1157,4944,4945,4948,4950,4952,4955,4957,4959,4961,4964],{"class":1159,"line":1294},[1157,4946,4947],{"class":1215},"  if",[1157,4949,2702],{"class":1279},[1157,4951,4930],{"class":1223},[1157,4953,4954],{"class":1211}," ===",[1157,4956,1303],{"class":1181},[1157,4958,2985],{"class":1185},[1157,4960,1227],{"class":1181},[1157,4962,4963],{"class":1279},") ",[1157,4965,4966],{"class":1163},"{\n",[1157,4968,4969,4972],{"class":1159,"line":1314},[1157,4970,4971],{"class":1219},"    clear",[1157,4973,2906],{"class":1279},[1157,4975,4976],{"class":1159,"line":1324},[1157,4977,4978],{"class":1163},"  }\n",[1157,4980,4981,4983],{"class":1159,"line":1331},[1157,4982,2616],{"class":1163},[1157,4984,1235],{"class":1223},[1157,4986,4987,4989,4991],{"class":1159,"line":1337},[1157,4988,1354],{"class":1163},[1157,4990,1168],{"class":1167},[1157,4992,1191],{"class":1163},[3860,4994,4996],{"id":4995},"监听watch","监听（Watch）",[1024,4998,4999,5000,5002,5003,5006],{},"要在应用程序中其他响应式值每次变化时重新运行你的获取函数，请使用 ",[1028,5001,4176],{}," 选项。你可以将它用于一个或多个",[3077,5004,5005],{},"可监听","的元素。",[1148,5008,5010],{"className":1150,"code":5009,"language":1153,"meta":1694,"style":354},"\u003Cscript setup lang=\"ts\">\nconst id = ref(1)\n\nconst { data, error, refresh } = await useFetch('\u002Fapi\u002Fusers', {\n  \u002F* Changing the id will trigger a refetch *\u002F\n  watch: [id],\n})\n\u003C\u002Fscript>\n",[1028,5011,5012,5032,5050,5054,5090,5095,5107,5113],{"__ignoreMap":354},[1157,5013,5014,5016,5018,5020,5022,5024,5026,5028,5030],{"class":1159,"line":1160},[1157,5015,1164],{"class":1163},[1157,5017,1168],{"class":1167},[1157,5019,1172],{"class":1171},[1157,5021,1175],{"class":1171},[1157,5023,1178],{"class":1163},[1157,5025,1182],{"class":1181},[1157,5027,1186],{"class":1185},[1157,5029,1182],{"class":1181},[1157,5031,1191],{"class":1163},[1157,5033,5034,5036,5038,5040,5042,5044,5048],{"class":1159,"line":1194},[1157,5035,1198],{"class":1197},[1157,5037,2523],{"class":1204},[1157,5039,1212],{"class":1211},[1157,5041,4507],{"class":1219},[1157,5043,1224],{"class":1223},[1157,5045,5047],{"class":5046},"sOUxV","1",[1157,5049,1235],{"class":1223},[1157,5051,5052],{"class":1159,"line":1238},[1157,5053,1242],{"emptyLinePlaceholder":1241},[1157,5055,5056,5058,5060,5062,5064,5066,5068,5070,5072,5074,5076,5078,5080,5082,5084,5086,5088],{"class":1159,"line":1245},[1157,5057,1198],{"class":1197},[1157,5059,1201],{"class":1163},[1157,5061,1205],{"class":1204},[1157,5063,1289],{"class":1163},[1157,5065,2358],{"class":1204},[1157,5067,1289],{"class":1163},[1157,5069,4689],{"class":1204},[1157,5071,1208],{"class":1163},[1157,5073,1212],{"class":1211},[1157,5075,1216],{"class":1215},[1157,5077,1220],{"class":1219},[1157,5079,1224],{"class":1223},[1157,5081,1227],{"class":1181},[1157,5083,4040],{"class":1185},[1157,5085,1227],{"class":1181},[1157,5087,1289],{"class":1163},[1157,5089,1260],{"class":1163},[1157,5091,5092],{"class":1159,"line":1263},[1157,5093,5094],{"class":1327},"  \u002F* Changing the id will trigger a refetch *\u002F\n",[1157,5096,5097,5100,5102,5105],{"class":1159,"line":1294},[1157,5098,5099],{"class":1279},"  watch",[1157,5101,1300],{"class":1163},[1157,5103,5104],{"class":1223}," [id]",[1157,5106,1311],{"class":1163},[1157,5108,5109,5111],{"class":1159,"line":1314},[1157,5110,2616],{"class":1163},[1157,5112,1235],{"class":1223},[1157,5114,5115,5117,5119],{"class":1159,"line":1324},[1157,5116,1354],{"class":1163},[1157,5118,1168],{"class":1167},[1157,5120,1191],{"class":1163},[1024,5122,5123,5124,5127],{},"注意，",[1143,5125,5126],{},"监听一个响应式值不会改变被获取的 URL","。例如，由于 URL 是在函数被调用时构建的，这会一直获取相同的初始用户 ID。",[1148,5129,5131],{"className":1150,"code":5130,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst id = ref(1)\n\nconst { data, error, refresh } = await useFetch(`\u002Fapi\u002Fusers\u002F${id.value}`, {\n  watch: [id],\n})\n\u003C\u002Fscript>\n",[1028,5132,5133,5153,5169,5173,5218,5228,5234],{"__ignoreMap":354},[1157,5134,5135,5137,5139,5141,5143,5145,5147,5149,5151],{"class":1159,"line":1160},[1157,5136,1164],{"class":1163},[1157,5138,1168],{"class":1167},[1157,5140,1172],{"class":1171},[1157,5142,1175],{"class":1171},[1157,5144,1178],{"class":1163},[1157,5146,1182],{"class":1181},[1157,5148,1186],{"class":1185},[1157,5150,1182],{"class":1181},[1157,5152,1191],{"class":1163},[1157,5154,5155,5157,5159,5161,5163,5165,5167],{"class":1159,"line":1194},[1157,5156,1198],{"class":1197},[1157,5158,2523],{"class":1204},[1157,5160,1212],{"class":1211},[1157,5162,4507],{"class":1219},[1157,5164,1224],{"class":1223},[1157,5166,5047],{"class":5046},[1157,5168,1235],{"class":1223},[1157,5170,5171],{"class":1159,"line":1238},[1157,5172,1242],{"emptyLinePlaceholder":1241},[1157,5174,5175,5177,5179,5181,5183,5185,5187,5189,5191,5193,5195,5197,5199,5201,5204,5206,5208,5210,5212,5214,5216],{"class":1159,"line":1245},[1157,5176,1198],{"class":1197},[1157,5178,1201],{"class":1163},[1157,5180,1205],{"class":1204},[1157,5182,1289],{"class":1163},[1157,5184,2358],{"class":1204},[1157,5186,1289],{"class":1163},[1157,5188,4689],{"class":1204},[1157,5190,1208],{"class":1163},[1157,5192,1212],{"class":1211},[1157,5194,1216],{"class":1215},[1157,5196,1220],{"class":1219},[1157,5198,1224],{"class":1223},[1157,5200,2567],{"class":1181},[1157,5202,5203],{"class":1185},"\u002Fapi\u002Fusers\u002F",[1157,5205,2573],{"class":1181},[1157,5207,2576],{"class":1223},[1157,5209,2535],{"class":1181},[1157,5211,4567],{"class":1223},[1157,5213,2579],{"class":1181},[1157,5215,1289],{"class":1163},[1157,5217,1260],{"class":1163},[1157,5219,5220,5222,5224,5226],{"class":1159,"line":1263},[1157,5221,5099],{"class":1279},[1157,5223,1300],{"class":1163},[1157,5225,5104],{"class":1223},[1157,5227,1311],{"class":1163},[1157,5229,5230,5232],{"class":1159,"line":1294},[1157,5231,2616],{"class":1163},[1157,5233,1235],{"class":1223},[1157,5235,5236,5238,5240],{"class":1159,"line":1314},[1157,5237,1354],{"class":1163},[1157,5239,1168],{"class":1167},[1157,5241,1191],{"class":1163},[1024,5243,5244,5245,1039],{},"如果你需要根据响应式值改变 URL，你可能想改用",[1032,5246,5248],{"href":5247},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching#computed-url","计算 URL",[1024,5250,5251,5252,5255],{},"当提供了响应式的 fetch 选项时，它们会被自动监听并触发重新获取。在某些情况下，可以通过指定 ",[1028,5253,5254],{},"watch: false"," 来选择退出此行为。",[1148,5257,5259],{"className":1917,"code":5258,"language":1186,"meta":354,"style":354},"const id = ref(1)\n\n\u002F\u002F Won't automatically refetch when id changes\nconst { data, execute } = await useFetch('\u002Fapi\u002Fusers', {\n  query: { id }, \u002F\u002F id is watched by default\n  watch: false, \u002F\u002F disables automatic watching of id\n})\n\n\u002F\u002F doesn't trigger refetch\nid.value = 2\n",[1028,5260,5261,5277,5281,5286,5318,5336,5349,5355,5359,5364],{"__ignoreMap":354},[1157,5262,5263,5265,5267,5269,5271,5273,5275],{"class":1159,"line":1160},[1157,5264,1198],{"class":1197},[1157,5266,2523],{"class":1204},[1157,5268,1212],{"class":1211},[1157,5270,4507],{"class":1219},[1157,5272,1224],{"class":1223},[1157,5274,5047],{"class":5046},[1157,5276,1235],{"class":1223},[1157,5278,5279],{"class":1159,"line":1194},[1157,5280,1242],{"emptyLinePlaceholder":1241},[1157,5282,5283],{"class":1159,"line":1238},[1157,5284,5285],{"class":1327},"\u002F\u002F Won't automatically refetch when id changes\n",[1157,5287,5288,5290,5292,5294,5296,5298,5300,5302,5304,5306,5308,5310,5312,5314,5316],{"class":1159,"line":1245},[1157,5289,1198],{"class":1197},[1157,5291,1201],{"class":1163},[1157,5293,1205],{"class":1204},[1157,5295,1289],{"class":1163},[1157,5297,4684],{"class":1204},[1157,5299,1208],{"class":1163},[1157,5301,1212],{"class":1211},[1157,5303,1216],{"class":1215},[1157,5305,1220],{"class":1219},[1157,5307,1224],{"class":1223},[1157,5309,1227],{"class":1181},[1157,5311,4040],{"class":1185},[1157,5313,1227],{"class":1181},[1157,5315,1289],{"class":1163},[1157,5317,1260],{"class":1163},[1157,5319,5320,5323,5325,5327,5330,5333],{"class":1159,"line":1263},[1157,5321,5322],{"class":1279},"  query",[1157,5324,1300],{"class":1163},[1157,5326,1201],{"class":1163},[1157,5328,5329],{"class":1223}," id ",[1157,5331,5332],{"class":1163},"},",[1157,5334,5335],{"class":1327}," \u002F\u002F id is watched by default\n",[1157,5337,5338,5340,5342,5344,5346],{"class":1159,"line":1294},[1157,5339,5099],{"class":1279},[1157,5341,1300],{"class":1163},[1157,5343,3523],{"class":3186},[1157,5345,1289],{"class":1163},[1157,5347,5348],{"class":1327}," \u002F\u002F disables automatic watching of id\n",[1157,5350,5351,5353],{"class":1159,"line":1314},[1157,5352,2616],{"class":1163},[1157,5354,1235],{"class":1223},[1157,5356,5357],{"class":1159,"line":1324},[1157,5358,1242],{"emptyLinePlaceholder":1241},[1157,5360,5361],{"class":1159,"line":1331},[1157,5362,5363],{"class":1327},"\u002F\u002F doesn't trigger refetch\n",[1157,5365,5366,5368,5370,5372,5374],{"class":1159,"line":1337},[1157,5367,2576],{"class":1223},[1157,5369,2535],{"class":1163},[1157,5371,4620],{"class":1223},[1157,5373,1178],{"class":1211},[1157,5375,5376],{"class":5046}," 2\n",[3860,5378,5380],{"id":5379},"计算-urlcomputed-url","计算 URL（Computed URL）",[1024,5382,5383],{},"有时你可能需要从响应式值计算 URL，并在这些值每次变化时刷新数据。与其左右腾挪，不如将每个参数作为响应式值附加。Nuxt 会自动使用响应式值，并在它变化时重新获取。",[1148,5385,5387],{"className":1150,"code":5386,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst id = ref(null)\n\nconst { data, status } = useLazyFetch('\u002Fapi\u002Fuser', {\n  query: {\n    user_id: id,\n  },\n})\n\u003C\u002Fscript>\n",[1028,5388,5389,5409,5427,5431,5462,5470,5481,5485,5491],{"__ignoreMap":354},[1157,5390,5391,5393,5395,5397,5399,5401,5403,5405,5407],{"class":1159,"line":1160},[1157,5392,1164],{"class":1163},[1157,5394,1168],{"class":1167},[1157,5396,1172],{"class":1171},[1157,5398,1175],{"class":1171},[1157,5400,1178],{"class":1163},[1157,5402,1182],{"class":1181},[1157,5404,1186],{"class":1185},[1157,5406,1182],{"class":1181},[1157,5408,1191],{"class":1163},[1157,5410,5411,5413,5415,5417,5419,5421,5425],{"class":1159,"line":1194},[1157,5412,1198],{"class":1197},[1157,5414,2523],{"class":1204},[1157,5416,1212],{"class":1211},[1157,5418,4507],{"class":1219},[1157,5420,1224],{"class":1223},[1157,5422,5424],{"class":5423},"s0q4w","null",[1157,5426,1235],{"class":1223},[1157,5428,5429],{"class":1159,"line":1238},[1157,5430,1242],{"emptyLinePlaceholder":1241},[1157,5432,5433,5435,5437,5439,5441,5443,5445,5447,5449,5451,5453,5456,5458,5460],{"class":1159,"line":1245},[1157,5434,1198],{"class":1197},[1157,5436,1201],{"class":1163},[1157,5438,1205],{"class":1204},[1157,5440,1289],{"class":1163},[1157,5442,2677],{"class":1204},[1157,5444,1208],{"class":1163},[1157,5446,1212],{"class":1211},[1157,5448,3369],{"class":1219},[1157,5450,1224],{"class":1223},[1157,5452,1227],{"class":1181},[1157,5454,5455],{"class":1185},"\u002Fapi\u002Fuser",[1157,5457,1227],{"class":1181},[1157,5459,1289],{"class":1163},[1157,5461,1260],{"class":1163},[1157,5463,5464,5466,5468],{"class":1159,"line":1263},[1157,5465,5322],{"class":1279},[1157,5467,1300],{"class":1163},[1157,5469,1260],{"class":1163},[1157,5471,5472,5475,5477,5479],{"class":1159,"line":1294},[1157,5473,5474],{"class":1279},"    user_id",[1157,5476,1300],{"class":1163},[1157,5478,2523],{"class":1223},[1157,5480,1311],{"class":1163},[1157,5482,5483],{"class":1159,"line":1314},[1157,5484,3835],{"class":1163},[1157,5486,5487,5489],{"class":1159,"line":1324},[1157,5488,2616],{"class":1163},[1157,5490,1235],{"class":1223},[1157,5492,5493,5495,5497],{"class":1159,"line":1331},[1157,5494,1354],{"class":1163},[1157,5496,1168],{"class":1167},[1157,5498,1191],{"class":1163},[1024,5500,5501,5502,5507],{},"在构建更复杂的 URL 的情况下，你可以使用回调作为 ",[1032,5503,5506],{"href":5504,"rel":5505},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Fcomputed",[1139],"computed getter"," 来返回 URL 字符串。",[1024,5509,5510,5511,5514],{},"每次依赖项变化时，都会使用新构建的 URL 获取数据。将它和 ",[1032,5512,5513],{"href":4813},"非立即执行"," 结合，你可以等到响应式元素变化后再获取数据。",[1148,5516,5518],{"className":1150,"code":5517,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst id = ref(null)\n\nconst { data, status } = useLazyFetch(() => `\u002Fapi\u002Fusers\u002F${id.value}`, {\n  immediate: false,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- disable the input while fetching -->\n    \u003Cinput\n      v-model=\"id\"\n      type=\"number\"\n      :disabled=\"status === 'pending'\"\n    >\n\n    \u003Cdiv v-if=\"status === 'idle'\">\n      Type a user ID\n    \u003C\u002Fdiv>\n\n    \u003Cdiv v-else-if=\"status === 'pending'\">\n      Loading ...\n    \u003C\u002Fdiv>\n\n    \u003Cdiv v-else>\n      {{ data }}\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1028,5519,5520,5540,5556,5560,5602,5613,5619,5627,5631,5639,5647,5652,5659,5673,5687,5700,5705,5709,5728,5733,5741,5745,5764,5769,5778,5783,5794,5800,5809,5818],{"__ignoreMap":354},[1157,5521,5522,5524,5526,5528,5530,5532,5534,5536,5538],{"class":1159,"line":1160},[1157,5523,1164],{"class":1163},[1157,5525,1168],{"class":1167},[1157,5527,1172],{"class":1171},[1157,5529,1175],{"class":1171},[1157,5531,1178],{"class":1163},[1157,5533,1182],{"class":1181},[1157,5535,1186],{"class":1185},[1157,5537,1182],{"class":1181},[1157,5539,1191],{"class":1163},[1157,5541,5542,5544,5546,5548,5550,5552,5554],{"class":1159,"line":1194},[1157,5543,1198],{"class":1197},[1157,5545,2523],{"class":1204},[1157,5547,1212],{"class":1211},[1157,5549,4507],{"class":1219},[1157,5551,1224],{"class":1223},[1157,5553,5424],{"class":5423},[1157,5555,1235],{"class":1223},[1157,5557,5558],{"class":1159,"line":1238},[1157,5559,1242],{"emptyLinePlaceholder":1241},[1157,5561,5562,5564,5566,5568,5570,5572,5574,5576,5578,5580,5582,5584,5586,5588,5590,5592,5594,5596,5598,5600],{"class":1159,"line":1245},[1157,5563,1198],{"class":1197},[1157,5565,1201],{"class":1163},[1157,5567,1205],{"class":1204},[1157,5569,1289],{"class":1163},[1157,5571,2677],{"class":1204},[1157,5573,1208],{"class":1163},[1157,5575,1212],{"class":1211},[1157,5577,3369],{"class":1219},[1157,5579,1224],{"class":1223},[1157,5581,2430],{"class":1163},[1157,5583,1945],{"class":1197},[1157,5585,4554],{"class":1181},[1157,5587,5203],{"class":1185},[1157,5589,2573],{"class":1181},[1157,5591,2576],{"class":1223},[1157,5593,2535],{"class":1181},[1157,5595,4567],{"class":1223},[1157,5597,2579],{"class":1181},[1157,5599,1289],{"class":1163},[1157,5601,1260],{"class":1163},[1157,5603,5604,5607,5609,5611],{"class":1159,"line":1263},[1157,5605,5606],{"class":1279},"  immediate",[1157,5608,1300],{"class":1163},[1157,5610,3523],{"class":3186},[1157,5612,1311],{"class":1163},[1157,5614,5615,5617],{"class":1159,"line":1294},[1157,5616,2616],{"class":1163},[1157,5618,1235],{"class":1223},[1157,5620,5621,5623,5625],{"class":1159,"line":1314},[1157,5622,1354],{"class":1163},[1157,5624,1168],{"class":1167},[1157,5626,1191],{"class":1163},[1157,5628,5629],{"class":1159,"line":1324},[1157,5630,1242],{"emptyLinePlaceholder":1241},[1157,5632,5633,5635,5637],{"class":1159,"line":1331},[1157,5634,1164],{"class":1163},[1157,5636,1371],{"class":1167},[1157,5638,1191],{"class":1163},[1157,5640,5641,5643,5645],{"class":1159,"line":1337},[1157,5642,1379],{"class":1163},[1157,5644,1382],{"class":1167},[1157,5646,1191],{"class":1163},[1157,5648,5649],{"class":1159,"line":1345},[1157,5650,5651],{"class":1327},"    \u003C!-- disable the input while fetching -->\n",[1157,5653,5654,5656],{"class":1159,"line":1351},[1157,5655,1430],{"class":1163},[1157,5657,5658],{"class":1167},"input\n",[1157,5660,5661,5664,5666,5668,5670],{"class":1159,"line":1361},[1157,5662,5663],{"class":1171},"      v-model",[1157,5665,1178],{"class":1163},[1157,5667,1182],{"class":1181},[1157,5669,2576],{"class":1185},[1157,5671,5672],{"class":1181},"\"\n",[1157,5674,5675,5678,5680,5682,5685],{"class":1159,"line":1366},[1157,5676,5677],{"class":1171},"      type",[1157,5679,1178],{"class":1163},[1157,5681,1182],{"class":1181},[1157,5683,5684],{"class":1185},"number",[1157,5686,5672],{"class":1181},[1157,5688,5689,5692,5694,5696,5698],{"class":1159,"line":1376},[1157,5690,5691],{"class":1171},"      :disabled",[1157,5693,1178],{"class":1163},[1157,5695,1182],{"class":1181},[1157,5697,3235],{"class":1185},[1157,5699,5672],{"class":1181},[1157,5701,5702],{"class":1159,"line":1399},[1157,5703,5704],{"class":1163},"    >\n",[1157,5706,5707],{"class":1159,"line":1405},[1157,5708,1242],{"emptyLinePlaceholder":1241},[1157,5710,5711,5713,5715,5717,5719,5721,5724,5726],{"class":1159,"line":1415},[1157,5712,1430],{"class":1163},[1157,5714,1382],{"class":1167},[1157,5716,1385],{"class":1171},[1157,5718,1178],{"class":1163},[1157,5720,1182],{"class":1181},[1157,5722,5723],{"class":1185},"status === 'idle'",[1157,5725,1182],{"class":1181},[1157,5727,1191],{"class":1163},[1157,5729,5730],{"class":1159,"line":1427},[1157,5731,5732],{"class":1223},"      Type a user ID\n",[1157,5734,5735,5737,5739],{"class":1159,"line":1450},[1157,5736,1459],{"class":1163},[1157,5738,1382],{"class":1167},[1157,5740,1191],{"class":1163},[1157,5742,5743],{"class":1159,"line":1456},[1157,5744,1242],{"emptyLinePlaceholder":1241},[1157,5746,5747,5749,5751,5754,5756,5758,5760,5762],{"class":1159,"line":1466},[1157,5748,1430],{"class":1163},[1157,5750,1382],{"class":1167},[1157,5752,5753],{"class":1171}," v-else-if",[1157,5755,1178],{"class":1163},[1157,5757,1182],{"class":1181},[1157,5759,3235],{"class":1185},[1157,5761,1182],{"class":1181},[1157,5763,1191],{"class":1163},[1157,5765,5766],{"class":1159,"line":1475},[1157,5767,5768],{"class":1223},"      Loading ...\n",[1157,5770,5772,5774,5776],{"class":1159,"line":5771},24,[1157,5773,1459],{"class":1163},[1157,5775,1382],{"class":1167},[1157,5777,1191],{"class":1163},[1157,5779,5781],{"class":1159,"line":5780},25,[1157,5782,1242],{"emptyLinePlaceholder":1241},[1157,5784,5786,5788,5790,5792],{"class":1159,"line":5785},26,[1157,5787,1430],{"class":1163},[1157,5789,1382],{"class":1167},[1157,5791,1422],{"class":1171},[1157,5793,1191],{"class":1163},[1157,5795,5797],{"class":1159,"line":5796},27,[1157,5798,5799],{"class":1223},"      {{ data }}\n",[1157,5801,5803,5805,5807],{"class":1159,"line":5802},28,[1157,5804,1459],{"class":1163},[1157,5806,1382],{"class":1167},[1157,5808,1191],{"class":1163},[1157,5810,5812,5814,5816],{"class":1159,"line":5811},29,[1157,5813,1408],{"class":1163},[1157,5815,1382],{"class":1167},[1157,5817,1191],{"class":1163},[1157,5819,5821,5823,5825],{"class":1159,"line":5820},30,[1157,5822,1354],{"class":1163},[1157,5824,1371],{"class":1167},[1157,5826,1191],{"class":1163},[1024,5828,5829,5830,1039],{},"如果你需要在其他响应式值变化时强制刷新，也可以",[1032,5831,5833],{"href":5832},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching#watch","监听其他值",[1492,5835,5837],{"id":5836},"非立即执行not-immediate","非立即执行（Not immediate）",[1024,5839,5840,5842,5843,5846],{},[1028,5841,453],{}," composable 会在被调用的那一刻开始获取数据。你可以通过设置 ",[1028,5844,5845],{},"immediate: false"," 来阻止这一点，例如等待用户交互。",[1024,5848,5849,5850,5852,5853,5855],{},"这样一来，你将同时需要 ",[1028,5851,1592],{}," 来处理获取生命周期，以及 ",[1028,5854,2988],{}," 来启动数据获取。",[1148,5857,5859],{"className":1150,"code":5858,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data, error, execute, status } = await useLazyFetch('\u002Fapi\u002Fcomments', {\n  immediate: false,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"status === 'idle'\">\n    \u003Cbutton @click=\"execute\">\n      Get data\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv v-else-if=\"status === 'pending'\">\n    Loading comments...\n  \u003C\u002Fdiv>\n\n  \u003Cdiv v-else>\n    {{ data }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1028,5860,5861,5881,5921,5931,5937,5945,5949,5957,5975,5993,5998,6006,6014,6018,6036,6041,6049,6053,6063,6068,6076],{"__ignoreMap":354},[1157,5862,5863,5865,5867,5869,5871,5873,5875,5877,5879],{"class":1159,"line":1160},[1157,5864,1164],{"class":1163},[1157,5866,1168],{"class":1167},[1157,5868,1172],{"class":1171},[1157,5870,1175],{"class":1171},[1157,5872,1178],{"class":1163},[1157,5874,1182],{"class":1181},[1157,5876,1186],{"class":1185},[1157,5878,1182],{"class":1181},[1157,5880,1191],{"class":1163},[1157,5882,5883,5885,5887,5889,5891,5893,5895,5897,5899,5901,5903,5905,5907,5909,5911,5913,5915,5917,5919],{"class":1159,"line":1194},[1157,5884,1198],{"class":1197},[1157,5886,1201],{"class":1163},[1157,5888,1205],{"class":1204},[1157,5890,1289],{"class":1163},[1157,5892,2358],{"class":1204},[1157,5894,1289],{"class":1163},[1157,5896,4684],{"class":1204},[1157,5898,1289],{"class":1163},[1157,5900,2677],{"class":1204},[1157,5902,1208],{"class":1163},[1157,5904,1212],{"class":1211},[1157,5906,1216],{"class":1215},[1157,5908,3369],{"class":1219},[1157,5910,1224],{"class":1223},[1157,5912,1227],{"class":1181},[1157,5914,3497],{"class":1185},[1157,5916,1227],{"class":1181},[1157,5918,1289],{"class":1163},[1157,5920,1260],{"class":1163},[1157,5922,5923,5925,5927,5929],{"class":1159,"line":1238},[1157,5924,5606],{"class":1279},[1157,5926,1300],{"class":1163},[1157,5928,3523],{"class":3186},[1157,5930,1311],{"class":1163},[1157,5932,5933,5935],{"class":1159,"line":1245},[1157,5934,2616],{"class":1163},[1157,5936,1235],{"class":1223},[1157,5938,5939,5941,5943],{"class":1159,"line":1263},[1157,5940,1354],{"class":1163},[1157,5942,1168],{"class":1167},[1157,5944,1191],{"class":1163},[1157,5946,5947],{"class":1159,"line":1294},[1157,5948,1242],{"emptyLinePlaceholder":1241},[1157,5950,5951,5953,5955],{"class":1159,"line":1314},[1157,5952,1164],{"class":1163},[1157,5954,1371],{"class":1167},[1157,5956,1191],{"class":1163},[1157,5958,5959,5961,5963,5965,5967,5969,5971,5973],{"class":1159,"line":1324},[1157,5960,1379],{"class":1163},[1157,5962,1382],{"class":1167},[1157,5964,1385],{"class":1171},[1157,5966,1178],{"class":1163},[1157,5968,1182],{"class":1181},[1157,5970,5723],{"class":1185},[1157,5972,1182],{"class":1181},[1157,5974,1191],{"class":1163},[1157,5976,5977,5979,5981,5983,5985,5987,5989,5991],{"class":1159,"line":1331},[1157,5978,1430],{"class":1163},[1157,5980,4759],{"class":1167},[1157,5982,4762],{"class":1171},[1157,5984,1178],{"class":1163},[1157,5986,1182],{"class":1181},[1157,5988,2988],{"class":1185},[1157,5990,1182],{"class":1181},[1157,5992,1191],{"class":1163},[1157,5994,5995],{"class":1159,"line":1337},[1157,5996,5997],{"class":1223},"      Get data\n",[1157,5999,6000,6002,6004],{"class":1159,"line":1345},[1157,6001,1459],{"class":1163},[1157,6003,4759],{"class":1167},[1157,6005,1191],{"class":1163},[1157,6007,6008,6010,6012],{"class":1159,"line":1351},[1157,6009,1408],{"class":1163},[1157,6011,1382],{"class":1167},[1157,6013,1191],{"class":1163},[1157,6015,6016],{"class":1159,"line":1361},[1157,6017,1242],{"emptyLinePlaceholder":1241},[1157,6019,6020,6022,6024,6026,6028,6030,6032,6034],{"class":1159,"line":1366},[1157,6021,1379],{"class":1163},[1157,6023,1382],{"class":1167},[1157,6025,5753],{"class":1171},[1157,6027,1178],{"class":1163},[1157,6029,1182],{"class":1181},[1157,6031,3235],{"class":1185},[1157,6033,1182],{"class":1181},[1157,6035,1191],{"class":1163},[1157,6037,6038],{"class":1159,"line":1376},[1157,6039,6040],{"class":1223},"    Loading comments...\n",[1157,6042,6043,6045,6047],{"class":1159,"line":1399},[1157,6044,1408],{"class":1163},[1157,6046,1382],{"class":1167},[1157,6048,1191],{"class":1163},[1157,6050,6051],{"class":1159,"line":1405},[1157,6052,1242],{"emptyLinePlaceholder":1241},[1157,6054,6055,6057,6059,6061],{"class":1159,"line":1415},[1157,6056,1379],{"class":1163},[1157,6058,1382],{"class":1167},[1157,6060,1422],{"class":1171},[1157,6062,1191],{"class":1163},[1157,6064,6065],{"class":1159,"line":1427},[1157,6066,6067],{"class":1223},"    {{ data }}\n",[1157,6069,6070,6072,6074],{"class":1159,"line":1450},[1157,6071,1408],{"class":1163},[1157,6073,1382],{"class":1167},[1157,6075,1191],{"class":1163},[1157,6077,6078,6080,6082],{"class":1159,"line":1456},[1157,6079,1354],{"class":1163},[1157,6081,1371],{"class":1167},[1157,6083,1191],{"class":1163},[1024,6085,6086,6087,6089],{},"为了更精细的控制，",[1028,6088,1592],{}," 变量可以是：",[1044,6091,6092,6097,6103,6108],{},[1047,6093,6094,6096],{},[1028,6095,3019],{},"：获取尚未开始",[1047,6098,6099,6102],{},[1028,6100,6101],{},"pending","：获取已开始但尚未完成",[1047,6104,6105,6107],{},[1028,6106,1595],{},"：获取失败",[1047,6109,6110,6113],{},[1028,6111,6112],{},"success","：获取成功完成",[1087,6115,6117],{"id":6116},"传递请求头和-cookie","传递请求头和 Cookie",[1024,6119,6120,6121,6123,6124,6126],{},"当我们在浏览器中调用 ",[1028,6122,553],{}," 时，用户请求头（如 ",[1028,6125,1965],{},"）会直接发送到 API。",[1024,6128,6129,6130,6132],{},"通常，在服务端渲染期间，出于安全考虑，",[1028,6131,553],{}," 不会包含用户的浏览器 cookie，也不会传递来自 fetch 响应的 cookie。",[1024,6134,6135,6136,1845,6138,6142,6143,1854],{},"然而，当在服务端用相对 URL 调用 ",[1028,6137,453],{},[1032,6139,6140],{"href":500},[1028,6141,501],{}," 来代理请求头和 cookie（除了那些不应被转发的请求头，如 ",[1028,6144,1853],{},[1492,6146,6148],{"id":6147},"在-ssr-响应中从服务端-api-调用传递-cookie","在 SSR 响应中从服务端 API 调用传递 Cookie",[1024,6150,6151],{},"如果你想在另一个方向上（从内部请求传回客户端）传递\u002F代理 cookie，你需要自己处理。",[1148,6153,6156],{"className":1917,"code":6154,"filename":6155,"language":1186,"meta":354,"style":354},"import type { H3Event } from 'h3'\n\nexport const fetchWithCookie = async (event: H3Event, url: string) => {\n  \u002F* Get the response from the server endpoint *\u002F\n  const res = await $fetch.raw(url)\n  \u002F* Get the cookies from the response *\u002F\n  const cookies = res.headers.getSetCookie()\n  \u002F* Attach each cookie to our incoming Request *\u002F\n  for (const cookie of cookies) {\n    event.res.headers.append('set-cookie', cookie)\n  }\n  \u002F* Return the data of the response *\u002F\n  return res._data\n}\n","app\u002Fcomposables\u002Ffetch.ts",[1028,6157,6158,6182,6186,6226,6231,6255,6260,6283,6288,6309,6343,6347,6352,6363],{"__ignoreMap":354},[1157,6159,6160,6163,6166,6168,6171,6173,6176,6178,6180],{"class":1159,"line":1160},[1157,6161,6162],{"class":1215},"import",[1157,6164,6165],{"class":1215}," type",[1157,6167,1201],{"class":1163},[1157,6169,6170],{"class":1223}," H3Event",[1157,6172,1208],{"class":1163},[1157,6174,6175],{"class":1215}," from",[1157,6177,1303],{"class":1181},[1157,6179,1492],{"class":1185},[1157,6181,4630],{"class":1181},[1157,6183,6184],{"class":1159,"line":1194},[1157,6185,1242],{"emptyLinePlaceholder":1241},[1157,6187,6188,6190,6193,6197,6199,6201,6203,6205,6207,6210,6212,6215,6217,6220,6222,6224],{"class":1159,"line":1238},[1157,6189,1930],{"class":1215},[1157,6191,6192],{"class":1197}," const",[1157,6194,6196],{"class":6195},"s5Y2e"," fetchWithCookie",[1157,6198,1212],{"class":1211},[1157,6200,2699],{"class":1197},[1157,6202,2702],{"class":1163},[1157,6204,1942],{"class":1941},[1157,6206,1300],{"class":1211},[1157,6208,6170],{"class":6209},"sJK67",[1157,6211,1289],{"class":1163},[1157,6213,6214],{"class":1941}," url",[1157,6216,1300],{"class":1211},[1157,6218,6219],{"class":2744}," string",[1157,6221,2778],{"class":1163},[1157,6223,1945],{"class":1197},[1157,6225,1260],{"class":1163},[1157,6227,6228],{"class":1159,"line":1245},[1157,6229,6230],{"class":1327},"  \u002F* Get the response from the server endpoint *\u002F\n",[1157,6232,6233,6235,6237,6239,6241,6243,6245,6248,6250,6253],{"class":1159,"line":1263},[1157,6234,1266],{"class":1197},[1157,6236,1269],{"class":1204},[1157,6238,1212],{"class":1211},[1157,6240,1216],{"class":1215},[1157,6242,1276],{"class":1223},[1157,6244,2535],{"class":1163},[1157,6246,6247],{"class":1219},"raw",[1157,6249,1224],{"class":1279},[1157,6251,6252],{"class":1223},"url",[1157,6254,1235],{"class":1279},[1157,6256,6257],{"class":1159,"line":1294},[1157,6258,6259],{"class":1327},"  \u002F* Get the cookies from the response *\u002F\n",[1157,6261,6262,6264,6267,6269,6271,6273,6276,6278,6281],{"class":1159,"line":1314},[1157,6263,1266],{"class":1197},[1157,6265,6266],{"class":1204}," cookies",[1157,6268,1212],{"class":1211},[1157,6270,1269],{"class":1223},[1157,6272,2535],{"class":1163},[1157,6274,6275],{"class":1223},"headers",[1157,6277,2535],{"class":1163},[1157,6279,6280],{"class":1219},"getSetCookie",[1157,6282,2906],{"class":1279},[1157,6284,6285],{"class":1159,"line":1324},[1157,6286,6287],{"class":1327},"  \u002F* Attach each cookie to our incoming Request *\u002F\n",[1157,6289,6290,6293,6295,6297,6300,6303,6305,6307],{"class":1159,"line":1331},[1157,6291,6292],{"class":1215},"  for",[1157,6294,2702],{"class":1279},[1157,6296,1198],{"class":1197},[1157,6298,6299],{"class":1204}," cookie",[1157,6301,6302],{"class":1211}," of",[1157,6304,6266],{"class":1223},[1157,6306,4963],{"class":1279},[1157,6308,4966],{"class":1163},[1157,6310,6311,6314,6316,6319,6321,6323,6325,6328,6330,6332,6335,6337,6339,6341],{"class":1159,"line":1337},[1157,6312,6313],{"class":1223},"    event",[1157,6315,2535],{"class":1163},[1157,6317,6318],{"class":1223},"res",[1157,6320,2535],{"class":1163},[1157,6322,6275],{"class":1223},[1157,6324,2535],{"class":1163},[1157,6326,6327],{"class":1219},"append",[1157,6329,1224],{"class":1279},[1157,6331,1227],{"class":1181},[1157,6333,6334],{"class":1185},"set-cookie",[1157,6336,1227],{"class":1181},[1157,6338,1289],{"class":1163},[1157,6340,6299],{"class":1223},[1157,6342,1235],{"class":1279},[1157,6344,6345],{"class":1159,"line":1345},[1157,6346,4978],{"class":1163},[1157,6348,6349],{"class":1159,"line":1351},[1157,6350,6351],{"class":1327},"  \u002F* Return the data of the response *\u002F\n",[1157,6353,6354,6356,6358,6360],{"class":1159,"line":1361},[1157,6355,2040],{"class":1215},[1157,6357,1269],{"class":1223},[1157,6359,2535],{"class":1163},[1157,6361,6362],{"class":1223},"_data\n",[1157,6364,6365],{"class":1159,"line":1366},[1157,6366,1348],{"class":1163},[1148,6368,6370],{"className":1150,"code":6369,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F This composable will automatically pass cookies to the client\nconst event = useRequestEvent()\n\nconst { data: result } = await useAsyncData(() => fetchWithCookie(event!, '\u002Fapi\u002Fwith-cookie'))\n\nonMounted(() => console.log(document.cookie))\n\u003C\u002Fscript>\n",[1028,6371,6372,6392,6397,6411,6415,6461,6465,6492],{"__ignoreMap":354},[1157,6373,6374,6376,6378,6380,6382,6384,6386,6388,6390],{"class":1159,"line":1160},[1157,6375,1164],{"class":1163},[1157,6377,1168],{"class":1167},[1157,6379,1172],{"class":1171},[1157,6381,1175],{"class":1171},[1157,6383,1178],{"class":1163},[1157,6385,1182],{"class":1181},[1157,6387,1186],{"class":1185},[1157,6389,1182],{"class":1181},[1157,6391,1191],{"class":1163},[1157,6393,6394],{"class":1159,"line":1194},[1157,6395,6396],{"class":1327},"\u002F\u002F This composable will automatically pass cookies to the client\n",[1157,6398,6399,6401,6404,6406,6409],{"class":1159,"line":1238},[1157,6400,1198],{"class":1197},[1157,6402,6403],{"class":1204}," event",[1157,6405,1212],{"class":1211},[1157,6407,6408],{"class":1219}," useRequestEvent",[1157,6410,2906],{"class":1223},[1157,6412,6413],{"class":1159,"line":1245},[1157,6414,1242],{"emptyLinePlaceholder":1241},[1157,6416,6417,6419,6421,6423,6425,6428,6430,6432,6434,6436,6438,6440,6442,6444,6447,6450,6452,6454,6457,6459],{"class":1159,"line":1263},[1157,6418,1198],{"class":1197},[1157,6420,1201],{"class":1163},[1157,6422,1205],{"class":2179},[1157,6424,1300],{"class":1163},[1157,6426,6427],{"class":1204}," result",[1157,6429,1208],{"class":1163},[1157,6431,1212],{"class":1211},[1157,6433,1216],{"class":1215},[1157,6435,2367],{"class":1219},[1157,6437,1224],{"class":1223},[1157,6439,2430],{"class":1163},[1157,6441,1945],{"class":1197},[1157,6443,6196],{"class":1219},[1157,6445,6446],{"class":1223},"(event",[1157,6448,6449],{"class":1211},"!",[1157,6451,1289],{"class":1163},[1157,6453,1303],{"class":1181},[1157,6455,6456],{"class":1185},"\u002Fapi\u002Fwith-cookie",[1157,6458,1227],{"class":1181},[1157,6460,2396],{"class":1223},[1157,6462,6463],{"class":1159,"line":1294},[1157,6464,1242],{"emptyLinePlaceholder":1241},[1157,6466,6467,6470,6472,6474,6476,6479,6481,6484,6487,6489],{"class":1159,"line":1314},[1157,6468,6469],{"class":1219},"onMounted",[1157,6471,1224],{"class":1223},[1157,6473,2430],{"class":1163},[1157,6475,1945],{"class":1197},[1157,6477,6478],{"class":1223}," console",[1157,6480,2535],{"class":1163},[1157,6482,6483],{"class":1219},"log",[1157,6485,6486],{"class":1223},"(document",[1157,6488,2535],{"class":1163},[1157,6490,6491],{"class":1223},"cookie))\n",[1157,6493,6494,6496,6498],{"class":1159,"line":1324},[1157,6495,1354],{"class":1163},[1157,6497,1168],{"class":1167},[1157,6499,1191],{"class":1163},[1087,6501,6503],{"id":6502},"options-api-支持","Options API 支持",[1024,6505,6506,6507,6510,6511,6513],{},"Nuxt 提供了一种在 Options API 中执行 ",[1028,6508,6509],{},"asyncData"," 获取的方式。为此，你必须将组件定义包裹在 ",[1028,6512,589],{}," 中。",[1148,6515,6517],{"className":1150,"code":6516,"language":1153,"meta":354,"style":354},"\u003Cscript>\nexport default defineNuxtComponent({\n  \u002F* Use the fetchKey option to provide a unique key *\u002F\n  fetchKey: 'hello',\n  async asyncData () {\n    return {\n      hello: await $fetch('\u002Fapi\u002Fhello'),\n    }\n  },\n})\n\u003C\u002Fscript>\n",[1028,6518,6519,6527,6540,6545,6561,6574,6580,6604,6609,6613,6619],{"__ignoreMap":354},[1157,6520,6521,6523,6525],{"class":1159,"line":1160},[1157,6522,1164],{"class":1163},[1157,6524,1168],{"class":1167},[1157,6526,1191],{"class":1163},[1157,6528,6529,6531,6533,6536,6538],{"class":1159,"line":1194},[1157,6530,1930],{"class":1215},[1157,6532,1933],{"class":1215},[1157,6534,6535],{"class":1219}," defineNuxtComponent",[1157,6537,1224],{"class":1223},[1157,6539,4966],{"class":1163},[1157,6541,6542],{"class":1159,"line":1238},[1157,6543,6544],{"class":1327},"  \u002F* Use the fetchKey option to provide a unique key *\u002F\n",[1157,6546,6547,6550,6552,6554,6557,6559],{"class":1159,"line":1245},[1157,6548,6549],{"class":1279},"  fetchKey",[1157,6551,1300],{"class":1163},[1157,6553,1303],{"class":1181},[1157,6555,6556],{"class":1185},"hello",[1157,6558,1227],{"class":1181},[1157,6560,1311],{"class":1163},[1157,6562,6563,6566,6570,6572],{"class":1159,"line":1263},[1157,6564,6565],{"class":1197},"  async",[1157,6567,6569],{"class":6568},"syA7L"," asyncData",[1157,6571,1257],{"class":1163},[1157,6573,1260],{"class":1163},[1157,6575,6576,6578],{"class":1159,"line":1294},[1157,6577,3783],{"class":1215},[1157,6579,1260],{"class":1163},[1157,6581,6582,6585,6587,6589,6591,6593,6595,6598,6600,6602],{"class":1159,"line":1314},[1157,6583,6584],{"class":1279},"      hello",[1157,6586,1300],{"class":1163},[1157,6588,1216],{"class":1215},[1157,6590,1276],{"class":1219},[1157,6592,1224],{"class":1279},[1157,6594,1227],{"class":1181},[1157,6596,6597],{"class":1185},"\u002Fapi\u002Fhello",[1157,6599,1227],{"class":1181},[1157,6601,2778],{"class":1279},[1157,6603,1311],{"class":1163},[1157,6605,6606],{"class":1159,"line":1324},[1157,6607,6608],{"class":1163},"    }\n",[1157,6610,6611],{"class":1159,"line":1331},[1157,6612,3835],{"class":1163},[1157,6614,6615,6617],{"class":1159,"line":1337},[1157,6616,2616],{"class":1163},[1157,6618,1235],{"class":1223},[1157,6620,6621,6623,6625],{"class":1159,"line":1345},[1157,6622,1354],{"class":1163},[1157,6624,1168],{"class":1167},[1157,6626,1191],{"class":1163},[1508,6628,6629],{},[1024,6630,1134,6631,1648,6633,6636],{},[1028,6632,1559],{},[1028,6634,6635],{},"\u003Cscript setup lang=\"ts\">"," 是在 Nuxt 中声明 Vue 组件的推荐方式。",[1828,6638,6639,6642,6679,6687,6700,6704,6721],{"to":588},[1087,6640,6641],{"id":6641},"从服务端到客户端序列化数据",[1024,6643,6644,6645,1036,6647,6649,6650,6653,6654,6661,6662,1030,6665,1030,6668,1030,6671,6674,6675,6678],{},"当使用 ",[1028,6646,441],{},[1028,6648,473],{}," 将服务端获取的数据传输到客户端（以及任何其他使用 ",[1032,6651,6652],{"href":1120},"Nuxt payload"," 的地方）时，payload 会使用 ",[1032,6655,6658],{"href":6656,"rel":6657},"https:\u002F\u002Fgithub.com\u002Fsveltejs\u002Fdevalue",[1139],[1028,6659,6660],{},"devalue"," 进行序列化。这让我们不仅能传输基本的 JSON，还能序列化和 revive\u002F反序列化更高级的数据类型，如正则表达式、Date、Map 和 Set、",[1028,6663,6664],{},"ref",[1028,6666,6667],{},"reactive",[1028,6669,6670],{},"shallowRef",[1028,6672,6673],{},"shallowReactive"," 以及 ",[1028,6676,6677],{},"NuxtError"," 等。",[1024,6680,6681,6682,6686],{},"你也可以为 Nuxt 不支持的类型定义自己的序列化器\u002F反序列化器。你可以在 ",[1032,6683,6684],{"href":1120},[1028,6685,485],{}," 文档中阅读更多内容。",[1508,6688,6689],{},[1024,6690,6691,6692,1134,6695,1648,6697,6699],{},"注意，这",[3077,6693,6694],{},"不适用于",[1028,6696,553],{},[1028,6698,453],{}," 从你的服务端路由获取的数据——更多信息见下一节。",[1087,6701,6703],{"id":6702},"从-api-路由序列化数据","从 API 路由序列化数据",[1024,6705,6706,6707,6709,6710,6713,6714,1036,6716,6720],{},"当从 ",[1028,6708,150],{}," 目录获取数据时，响应会使用 ",[1028,6711,6712],{},"JSON.stringify"," 进行序列化。但是，由于序列化仅限于 JavaScript 基本类型，Nuxt 会尽力将 ",[1028,6715,553],{},[1032,6717,6718],{"href":452},[1028,6719,453],{}," 的返回类型转换为匹配实际值。",[1828,6722,6726,6732,6736,6776,6841,6845,6855,7030,7130,7134,7143,7152,7297,7433,7437,7441,7461,7464,7722,7726,7733,7913],{"to":6723,"icon":6724,"target":6725},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FJSON\u002Fstringify#description","i-simple-icons-mdnwebdocs","_blank",[1024,6727,6728,6729,6731],{},"了解关于 ",[1028,6730,6712],{}," 限制的更多信息。\n:::",[1492,6733,6735],{"id":6734},"示例example","示例（Example）",[1148,6737,6740],{"className":1917,"code":6738,"filename":6739,"language":1186,"meta":354,"style":354},"export default defineEventHandler(() => {\n  return new Date()\n})\n","server\u002Fapi\u002Ffoo.ts",[1028,6741,6742,6758,6770],{"__ignoreMap":354},[1157,6743,6744,6746,6748,6750,6752,6754,6756],{"class":1159,"line":1160},[1157,6745,1930],{"class":1215},[1157,6747,1933],{"class":1215},[1157,6749,1936],{"class":1219},[1157,6751,1224],{"class":1223},[1157,6753,2430],{"class":1163},[1157,6755,1945],{"class":1197},[1157,6757,1260],{"class":1163},[1157,6759,6760,6762,6765,6768],{"class":1159,"line":1194},[1157,6761,2040],{"class":1215},[1157,6763,6764],{"class":1211}," new",[1157,6766,6767],{"class":1219}," Date",[1157,6769,2906],{"class":1279},[1157,6771,6772,6774],{"class":1159,"line":1238},[1157,6773,2616],{"class":1163},[1157,6775,1235],{"class":1223},[1148,6777,6779],{"className":1150,"code":6778,"filename":1152,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F Type of `data` is inferred as string even though we returned a Date object\nconst { data } = await useFetch('\u002Fapi\u002Ffoo')\n\u003C\u002Fscript>\n",[1028,6780,6781,6801,6806,6833],{"__ignoreMap":354},[1157,6782,6783,6785,6787,6789,6791,6793,6795,6797,6799],{"class":1159,"line":1160},[1157,6784,1164],{"class":1163},[1157,6786,1168],{"class":1167},[1157,6788,1172],{"class":1171},[1157,6790,1175],{"class":1171},[1157,6792,1178],{"class":1163},[1157,6794,1182],{"class":1181},[1157,6796,1186],{"class":1185},[1157,6798,1182],{"class":1181},[1157,6800,1191],{"class":1163},[1157,6802,6803],{"class":1159,"line":1194},[1157,6804,6805],{"class":1327},"\u002F\u002F Type of `data` is inferred as string even though we returned a Date object\n",[1157,6807,6808,6810,6812,6814,6816,6818,6820,6822,6824,6826,6829,6831],{"class":1159,"line":1238},[1157,6809,1198],{"class":1197},[1157,6811,1201],{"class":1163},[1157,6813,1205],{"class":1204},[1157,6815,1208],{"class":1163},[1157,6817,1212],{"class":1211},[1157,6819,1216],{"class":1215},[1157,6821,1220],{"class":1219},[1157,6823,1224],{"class":1223},[1157,6825,1227],{"class":1181},[1157,6827,6828],{"class":1185},"\u002Fapi\u002Ffoo",[1157,6830,1227],{"class":1181},[1157,6832,1235],{"class":1223},[1157,6834,6835,6837,6839],{"class":1159,"line":1245},[1157,6836,1354],{"class":1163},[1157,6838,1168],{"class":1167},[1157,6840,1191],{"class":1163},[1492,6842,6844],{"id":6843},"自定义序列化函数custom-serializer-function","自定义序列化函数（Custom serializer function）",[1024,6846,6847,6848,6851,6852,6854],{},"要自定义序列化行为，你可以在返回的对象上定义 ",[1028,6849,6850],{},"toJSON"," 函数。如果你定义了 ",[1028,6853,6850],{}," 方法，Nuxt 会尊重该函数的返回类型，而不会尝试转换类型。",[1148,6856,6859],{"className":1917,"code":6857,"filename":6858,"language":1186,"meta":354,"style":354},"export default defineEventHandler(() => {\n  const data = {\n    createdAt: new Date(),\n\n    toJSON () {\n      return {\n        createdAt: {\n          year: this.createdAt.getFullYear(),\n          month: this.createdAt.getMonth(),\n          day: this.createdAt.getDate(),\n        },\n      }\n    },\n  }\n  return data\n})\n","server\u002Fapi\u002Fbar.ts",[1028,6860,6861,6877,6887,6902,6906,6915,6922,6931,6955,6977,6999,7004,7009,7013,7017,7024],{"__ignoreMap":354},[1157,6862,6863,6865,6867,6869,6871,6873,6875],{"class":1159,"line":1160},[1157,6864,1930],{"class":1215},[1157,6866,1933],{"class":1215},[1157,6868,1936],{"class":1219},[1157,6870,1224],{"class":1223},[1157,6872,2430],{"class":1163},[1157,6874,1945],{"class":1197},[1157,6876,1260],{"class":1163},[1157,6878,6879,6881,6883,6885],{"class":1159,"line":1194},[1157,6880,1266],{"class":1197},[1157,6882,1205],{"class":1204},[1157,6884,1212],{"class":1211},[1157,6886,1260],{"class":1163},[1157,6888,6889,6892,6894,6896,6898,6900],{"class":1159,"line":1238},[1157,6890,6891],{"class":1279},"    createdAt",[1157,6893,1300],{"class":1163},[1157,6895,6764],{"class":1211},[1157,6897,6767],{"class":1219},[1157,6899,2430],{"class":1279},[1157,6901,1311],{"class":1163},[1157,6903,6904],{"class":1159,"line":1245},[1157,6905,1242],{"emptyLinePlaceholder":1241},[1157,6907,6908,6911,6913],{"class":1159,"line":1263},[1157,6909,6910],{"class":6568},"    toJSON",[1157,6912,1257],{"class":1163},[1157,6914,1260],{"class":1163},[1157,6916,6917,6920],{"class":1159,"line":1294},[1157,6918,6919],{"class":1215},"      return",[1157,6921,1260],{"class":1163},[1157,6923,6924,6927,6929],{"class":1159,"line":1314},[1157,6925,6926],{"class":1279},"        createdAt",[1157,6928,1300],{"class":1163},[1157,6930,1260],{"class":1163},[1157,6932,6933,6936,6938,6941,6943,6946,6948,6951,6953],{"class":1159,"line":1324},[1157,6934,6935],{"class":1279},"          year",[1157,6937,1300],{"class":1163},[1157,6939,6940],{"class":5423}," this",[1157,6942,2535],{"class":1163},[1157,6944,6945],{"class":1223},"createdAt",[1157,6947,2535],{"class":1163},[1157,6949,6950],{"class":1219},"getFullYear",[1157,6952,2430],{"class":1279},[1157,6954,1311],{"class":1163},[1157,6956,6957,6960,6962,6964,6966,6968,6970,6973,6975],{"class":1159,"line":1331},[1157,6958,6959],{"class":1279},"          month",[1157,6961,1300],{"class":1163},[1157,6963,6940],{"class":5423},[1157,6965,2535],{"class":1163},[1157,6967,6945],{"class":1223},[1157,6969,2535],{"class":1163},[1157,6971,6972],{"class":1219},"getMonth",[1157,6974,2430],{"class":1279},[1157,6976,1311],{"class":1163},[1157,6978,6979,6982,6984,6986,6988,6990,6992,6995,6997],{"class":1159,"line":1337},[1157,6980,6981],{"class":1279},"          day",[1157,6983,1300],{"class":1163},[1157,6985,6940],{"class":5423},[1157,6987,2535],{"class":1163},[1157,6989,6945],{"class":1223},[1157,6991,2535],{"class":1163},[1157,6993,6994],{"class":1219},"getDate",[1157,6996,2430],{"class":1279},[1157,6998,1311],{"class":1163},[1157,7000,7001],{"class":1159,"line":1345},[1157,7002,7003],{"class":1163},"        },\n",[1157,7005,7006],{"class":1159,"line":1351},[1157,7007,7008],{"class":1163},"      }\n",[1157,7010,7011],{"class":1159,"line":1361},[1157,7012,1334],{"class":1163},[1157,7014,7015],{"class":1159,"line":1366},[1157,7016,4978],{"class":1163},[1157,7018,7019,7021],{"class":1159,"line":1376},[1157,7020,2040],{"class":1215},[1157,7022,7023],{"class":1223}," data\n",[1157,7025,7026,7028],{"class":1159,"line":1399},[1157,7027,2616],{"class":1163},[1157,7029,1235],{"class":1223},[1148,7031,7033],{"className":1150,"code":7032,"filename":1152,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F Type of `data` is inferred as\n\u002F\u002F {\n\u002F\u002F   createdAt: {\n\u002F\u002F     year: number\n\u002F\u002F     month: number\n\u002F\u002F     day: number\n\u002F\u002F   }\n\u002F\u002F }\nconst { data } = await useFetch('\u002Fapi\u002Fbar')\n\u003C\u002Fscript>\n",[1028,7034,7035,7055,7060,7065,7070,7075,7080,7085,7090,7095,7122],{"__ignoreMap":354},[1157,7036,7037,7039,7041,7043,7045,7047,7049,7051,7053],{"class":1159,"line":1160},[1157,7038,1164],{"class":1163},[1157,7040,1168],{"class":1167},[1157,7042,1172],{"class":1171},[1157,7044,1175],{"class":1171},[1157,7046,1178],{"class":1163},[1157,7048,1182],{"class":1181},[1157,7050,1186],{"class":1185},[1157,7052,1182],{"class":1181},[1157,7054,1191],{"class":1163},[1157,7056,7057],{"class":1159,"line":1194},[1157,7058,7059],{"class":1327},"\u002F\u002F Type of `data` is inferred as\n",[1157,7061,7062],{"class":1159,"line":1238},[1157,7063,7064],{"class":1327},"\u002F\u002F {\n",[1157,7066,7067],{"class":1159,"line":1245},[1157,7068,7069],{"class":1327},"\u002F\u002F   createdAt: {\n",[1157,7071,7072],{"class":1159,"line":1263},[1157,7073,7074],{"class":1327},"\u002F\u002F     year: number\n",[1157,7076,7077],{"class":1159,"line":1294},[1157,7078,7079],{"class":1327},"\u002F\u002F     month: number\n",[1157,7081,7082],{"class":1159,"line":1314},[1157,7083,7084],{"class":1327},"\u002F\u002F     day: number\n",[1157,7086,7087],{"class":1159,"line":1324},[1157,7088,7089],{"class":1327},"\u002F\u002F   }\n",[1157,7091,7092],{"class":1159,"line":1331},[1157,7093,7094],{"class":1327},"\u002F\u002F }\n",[1157,7096,7097,7099,7101,7103,7105,7107,7109,7111,7113,7115,7118,7120],{"class":1159,"line":1337},[1157,7098,1198],{"class":1197},[1157,7100,1201],{"class":1163},[1157,7102,1205],{"class":1204},[1157,7104,1208],{"class":1163},[1157,7106,1212],{"class":1211},[1157,7108,1216],{"class":1215},[1157,7110,1220],{"class":1219},[1157,7112,1224],{"class":1223},[1157,7114,1227],{"class":1181},[1157,7116,7117],{"class":1185},"\u002Fapi\u002Fbar",[1157,7119,1227],{"class":1181},[1157,7121,1235],{"class":1223},[1157,7123,7124,7126,7128],{"class":1159,"line":1345},[1157,7125,1354],{"class":1163},[1157,7127,1168],{"class":1167},[1157,7129,1191],{"class":1163},[1492,7131,7133],{"id":7132},"使用替代的序列化器using-an-alternative-serializer","使用替代的序列化器（Using an alternative serializer）",[1024,7135,7136,7137,7139,7140,7142],{},"Nuxt 目前不支持 ",[1028,7138,6712],{}," 之外的替代序列化器。但是，你可以将 payload 作为普通字符串返回，并利用 ",[1028,7141,6850],{}," 方法来保持类型安全。",[1024,7144,7145,7146,7151],{},"在下面的示例中，我们使用 ",[1032,7147,7150],{"href":7148,"rel":7149},"https:\u002F\u002Fgithub.com\u002Fflightcontrolhq\u002Fsuperjson",[1139],"superjson"," 作为序列化器。",[1148,7153,7156],{"className":1917,"code":7154,"filename":7155,"language":1186,"meta":354,"style":354},"import superjson from 'superjson'\n\nexport default defineEventHandler(() => {\n  const data = {\n    createdAt: new Date(),\n\n    \u002F\u002F Workaround the type conversion\n    toJSON () {\n      return this\n    },\n  }\n\n  \u002F\u002F Serialize the output to string, using superjson\n  return superjson.stringify(data) as unknown as typeof data\n})\n","server\u002Fapi\u002Fsuperjson.ts",[1028,7157,7158,7174,7178,7194,7204,7218,7222,7227,7235,7242,7246,7250,7254,7259,7291],{"__ignoreMap":354},[1157,7159,7160,7162,7165,7168,7170,7172],{"class":1159,"line":1160},[1157,7161,6162],{"class":1215},[1157,7163,7164],{"class":1223}," superjson ",[1157,7166,7167],{"class":1215},"from",[1157,7169,1303],{"class":1181},[1157,7171,7150],{"class":1185},[1157,7173,4630],{"class":1181},[1157,7175,7176],{"class":1159,"line":1194},[1157,7177,1242],{"emptyLinePlaceholder":1241},[1157,7179,7180,7182,7184,7186,7188,7190,7192],{"class":1159,"line":1238},[1157,7181,1930],{"class":1215},[1157,7183,1933],{"class":1215},[1157,7185,1936],{"class":1219},[1157,7187,1224],{"class":1223},[1157,7189,2430],{"class":1163},[1157,7191,1945],{"class":1197},[1157,7193,1260],{"class":1163},[1157,7195,7196,7198,7200,7202],{"class":1159,"line":1245},[1157,7197,1266],{"class":1197},[1157,7199,1205],{"class":1204},[1157,7201,1212],{"class":1211},[1157,7203,1260],{"class":1163},[1157,7205,7206,7208,7210,7212,7214,7216],{"class":1159,"line":1263},[1157,7207,6891],{"class":1279},[1157,7209,1300],{"class":1163},[1157,7211,6764],{"class":1211},[1157,7213,6767],{"class":1219},[1157,7215,2430],{"class":1279},[1157,7217,1311],{"class":1163},[1157,7219,7220],{"class":1159,"line":1294},[1157,7221,1242],{"emptyLinePlaceholder":1241},[1157,7223,7224],{"class":1159,"line":1314},[1157,7225,7226],{"class":1327},"    \u002F\u002F Workaround the type conversion\n",[1157,7228,7229,7231,7233],{"class":1159,"line":1324},[1157,7230,6910],{"class":6568},[1157,7232,1257],{"class":1163},[1157,7234,1260],{"class":1163},[1157,7236,7237,7239],{"class":1159,"line":1331},[1157,7238,6919],{"class":1215},[1157,7240,7241],{"class":5423}," this\n",[1157,7243,7244],{"class":1159,"line":1337},[1157,7245,1334],{"class":1163},[1157,7247,7248],{"class":1159,"line":1345},[1157,7249,4978],{"class":1163},[1157,7251,7252],{"class":1159,"line":1351},[1157,7253,1242],{"emptyLinePlaceholder":1241},[1157,7255,7256],{"class":1159,"line":1361},[1157,7257,7258],{"class":1327},"  \u002F\u002F Serialize the output to string, using superjson\n",[1157,7260,7261,7263,7266,7268,7271,7273,7275,7277,7280,7283,7286,7289],{"class":1159,"line":1366},[1157,7262,2040],{"class":1215},[1157,7264,7265],{"class":1223}," superjson",[1157,7267,2535],{"class":1163},[1157,7269,7270],{"class":1219},"stringify",[1157,7272,1224],{"class":1279},[1157,7274,1572],{"class":1223},[1157,7276,4963],{"class":1279},[1157,7278,7279],{"class":1215},"as",[1157,7281,7282],{"class":2744}," unknown",[1157,7284,7285],{"class":1215}," as",[1157,7287,7288],{"class":1211}," typeof",[1157,7290,7023],{"class":1223},[1157,7292,7293,7295],{"class":1159,"line":1376},[1157,7294,2616],{"class":1163},[1157,7296,1235],{"class":1223},[1148,7298,7300],{"className":1150,"code":7299,"filename":1152,"language":1153,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nimport superjson from 'superjson'\n\n\u002F\u002F `date` is inferred as { createdAt: Date } and you can safely use the Date object methods\nconst { data } = await useFetch('\u002Fapi\u002Fsuperjson', {\n  transform: (value) => {\n    return superjson.parse(value as unknown as string)\n  },\n})\n\u003C\u002Fscript>\n",[1028,7301,7302,7322,7336,7340,7345,7374,7390,7415,7419,7425],{"__ignoreMap":354},[1157,7303,7304,7306,7308,7310,7312,7314,7316,7318,7320],{"class":1159,"line":1160},[1157,7305,1164],{"class":1163},[1157,7307,1168],{"class":1167},[1157,7309,1172],{"class":1171},[1157,7311,1175],{"class":1171},[1157,7313,1178],{"class":1163},[1157,7315,1182],{"class":1181},[1157,7317,1186],{"class":1185},[1157,7319,1182],{"class":1181},[1157,7321,1191],{"class":1163},[1157,7323,7324,7326,7328,7330,7332,7334],{"class":1159,"line":1194},[1157,7325,6162],{"class":1215},[1157,7327,7164],{"class":1223},[1157,7329,7167],{"class":1215},[1157,7331,1303],{"class":1181},[1157,7333,7150],{"class":1185},[1157,7335,4630],{"class":1181},[1157,7337,7338],{"class":1159,"line":1238},[1157,7339,1242],{"emptyLinePlaceholder":1241},[1157,7341,7342],{"class":1159,"line":1245},[1157,7343,7344],{"class":1327},"\u002F\u002F `date` is inferred as { createdAt: Date } and you can safely use the Date object methods\n",[1157,7346,7347,7349,7351,7353,7355,7357,7359,7361,7363,7365,7368,7370,7372],{"class":1159,"line":1263},[1157,7348,1198],{"class":1197},[1157,7350,1201],{"class":1163},[1157,7352,1205],{"class":1204},[1157,7354,1208],{"class":1163},[1157,7356,1212],{"class":1211},[1157,7358,1216],{"class":1215},[1157,7360,1220],{"class":1219},[1157,7362,1224],{"class":1223},[1157,7364,1227],{"class":1181},[1157,7366,7367],{"class":1185},"\u002Fapi\u002Fsuperjson",[1157,7369,1227],{"class":1181},[1157,7371,1289],{"class":1163},[1157,7373,1260],{"class":1163},[1157,7375,7376,7378,7380,7382,7384,7386,7388],{"class":1159,"line":1294},[1157,7377,3765],{"class":1219},[1157,7379,1300],{"class":1163},[1157,7381,2702],{"class":1163},[1157,7383,4567],{"class":1941},[1157,7385,2778],{"class":1163},[1157,7387,1945],{"class":1197},[1157,7389,1260],{"class":1163},[1157,7391,7392,7394,7396,7398,7401,7403,7405,7407,7409,7411,7413],{"class":1159,"line":1314},[1157,7393,3783],{"class":1215},[1157,7395,7265],{"class":1223},[1157,7397,2535],{"class":1163},[1157,7399,7400],{"class":1219},"parse",[1157,7402,1224],{"class":1279},[1157,7404,4567],{"class":1223},[1157,7406,7285],{"class":1215},[1157,7408,7282],{"class":2744},[1157,7410,7285],{"class":1215},[1157,7412,6219],{"class":2744},[1157,7414,1235],{"class":1279},[1157,7416,7417],{"class":1159,"line":1324},[1157,7418,3835],{"class":1163},[1157,7420,7421,7423],{"class":1159,"line":1331},[1157,7422,2616],{"class":1163},[1157,7424,1235],{"class":1223},[1157,7426,7427,7429,7431],{"class":1159,"line":1337},[1157,7428,1354],{"class":1163},[1157,7430,1168],{"class":1167},[1157,7432,1191],{"class":1163},[1087,7434,7436],{"id":7435},"常用配方recipes","常用配方（Recipes）",[1492,7438,7440],{"id":7439},"通过-post-请求消费-sseserver-sent-events","通过 POST 请求消费 SSE（Server-Sent Events）",[1130,7442,7443],{},[1024,7444,7445,7446,7453,7454,1039],{},"如果你通过 GET 请求消费 SSE，可以使用 ",[1032,7447,7450],{"href":7448,"rel":7449},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FEventSource",[1139],[1028,7451,7452],{},"EventSource"," 或 VueUse composable ",[1032,7455,7458],{"href":7456,"rel":7457},"https:\u002F\u002Fvueuse.org\u002Fcore\u002Fuseeventsource\u002F",[1139],[1028,7459,7460],{},"useEventSource",[1024,7462,7463],{},"通过 POST 请求消费 SSE 时，你需要手动处理连接。方法如下：",[1148,7465,7467],{"className":1917,"code":7466,"language":1186,"meta":354,"style":354},"\u002F\u002F Make a POST request to the SSE endpoint\nconst response = await $fetch\u003CReadableStream>('\u002Fchats\u002Fask-ai', {\n  method: 'POST',\n  body: {\n    query: 'Hello AI, how are you?',\n  },\n  responseType: 'stream',\n})\n\n\u002F\u002F Create a new ReadableStream from the response with TextDecoderStream to get the data as text\nconst reader = response.pipeThrough(new TextDecoderStream()).getReader()\n\n\u002F\u002F Read the chunk of data as we get it\nwhile (true) {\n  const { value, done } = await reader.read()\n\n  if (done) { break }\n\n  console.log('Received:', value)\n}\n",[1028,7468,7469,7474,7507,7522,7531,7547,7551,7567,7573,7577,7582,7616,7620,7625,7639,7668,7672,7690,7694,7718],{"__ignoreMap":354},[1157,7470,7471],{"class":1159,"line":1160},[1157,7472,7473],{"class":1327},"\u002F\u002F Make a POST request to the SSE endpoint\n",[1157,7475,7476,7478,7481,7483,7485,7487,7489,7492,7494,7496,7498,7501,7503,7505],{"class":1159,"line":1194},[1157,7477,1198],{"class":1197},[1157,7479,7480],{"class":1204}," response",[1157,7482,1212],{"class":1211},[1157,7484,1216],{"class":1215},[1157,7486,1276],{"class":1219},[1157,7488,1164],{"class":1163},[1157,7490,7491],{"class":6209},"ReadableStream",[1157,7493,2232],{"class":1163},[1157,7495,1224],{"class":1223},[1157,7497,1227],{"class":1181},[1157,7499,7500],{"class":1185},"\u002Fchats\u002Fask-ai",[1157,7502,1227],{"class":1181},[1157,7504,1289],{"class":1163},[1157,7506,1260],{"class":1163},[1157,7508,7509,7512,7514,7516,7518,7520],{"class":1159,"line":1238},[1157,7510,7511],{"class":1279},"  method",[1157,7513,1300],{"class":1163},[1157,7515,1303],{"class":1181},[1157,7517,1306],{"class":1185},[1157,7519,1227],{"class":1181},[1157,7521,1311],{"class":1163},[1157,7523,7524,7527,7529],{"class":1159,"line":1245},[1157,7525,7526],{"class":1279},"  body",[1157,7528,1300],{"class":1163},[1157,7530,1260],{"class":1163},[1157,7532,7533,7536,7538,7540,7543,7545],{"class":1159,"line":1263},[1157,7534,7535],{"class":1279},"    query",[1157,7537,1300],{"class":1163},[1157,7539,1303],{"class":1181},[1157,7541,7542],{"class":1185},"Hello AI, how are you?",[1157,7544,1227],{"class":1181},[1157,7546,1311],{"class":1163},[1157,7548,7549],{"class":1159,"line":1294},[1157,7550,3835],{"class":1163},[1157,7552,7553,7556,7558,7560,7563,7565],{"class":1159,"line":1314},[1157,7554,7555],{"class":1279},"  responseType",[1157,7557,1300],{"class":1163},[1157,7559,1303],{"class":1181},[1157,7561,7562],{"class":1185},"stream",[1157,7564,1227],{"class":1181},[1157,7566,1311],{"class":1163},[1157,7568,7569,7571],{"class":1159,"line":1324},[1157,7570,2616],{"class":1163},[1157,7572,1235],{"class":1223},[1157,7574,7575],{"class":1159,"line":1331},[1157,7576,1242],{"emptyLinePlaceholder":1241},[1157,7578,7579],{"class":1159,"line":1337},[1157,7580,7581],{"class":1327},"\u002F\u002F Create a new ReadableStream from the response with TextDecoderStream to get the data as text\n",[1157,7583,7584,7586,7589,7591,7593,7595,7598,7600,7603,7606,7609,7611,7614],{"class":1159,"line":1345},[1157,7585,1198],{"class":1197},[1157,7587,7588],{"class":1204}," reader",[1157,7590,1212],{"class":1211},[1157,7592,7480],{"class":1223},[1157,7594,2535],{"class":1163},[1157,7596,7597],{"class":1219},"pipeThrough",[1157,7599,1224],{"class":1223},[1157,7601,7602],{"class":1211},"new",[1157,7604,7605],{"class":1219}," TextDecoderStream",[1157,7607,7608],{"class":1223},"())",[1157,7610,2535],{"class":1163},[1157,7612,7613],{"class":1219},"getReader",[1157,7615,2906],{"class":1223},[1157,7617,7618],{"class":1159,"line":1351},[1157,7619,1242],{"emptyLinePlaceholder":1241},[1157,7621,7622],{"class":1159,"line":1361},[1157,7623,7624],{"class":1327},"\u002F\u002F Read the chunk of data as we get it\n",[1157,7626,7627,7630,7632,7635,7637],{"class":1159,"line":1366},[1157,7628,7629],{"class":1215},"while",[1157,7631,2702],{"class":1223},[1157,7633,7634],{"class":3186},"true",[1157,7636,4963],{"class":1223},[1157,7638,4966],{"class":1163},[1157,7640,7641,7643,7645,7648,7650,7653,7655,7657,7659,7661,7663,7666],{"class":1159,"line":1376},[1157,7642,1266],{"class":1197},[1157,7644,1201],{"class":1163},[1157,7646,7647],{"class":1204}," value",[1157,7649,1289],{"class":1163},[1157,7651,7652],{"class":1204}," done",[1157,7654,1208],{"class":1163},[1157,7656,1212],{"class":1211},[1157,7658,1216],{"class":1215},[1157,7660,7588],{"class":1223},[1157,7662,2535],{"class":1163},[1157,7664,7665],{"class":1219},"read",[1157,7667,2906],{"class":1279},[1157,7669,7670],{"class":1159,"line":1399},[1157,7671,1242],{"emptyLinePlaceholder":1241},[1157,7673,7674,7676,7678,7681,7683,7685,7688],{"class":1159,"line":1405},[1157,7675,4947],{"class":1215},[1157,7677,2702],{"class":1279},[1157,7679,7680],{"class":1223},"done",[1157,7682,4963],{"class":1279},[1157,7684,3802],{"class":1163},[1157,7686,7687],{"class":1215}," break",[1157,7689,2830],{"class":1163},[1157,7691,7692],{"class":1159,"line":1415},[1157,7693,1242],{"emptyLinePlaceholder":1241},[1157,7695,7696,7699,7701,7703,7705,7707,7710,7712,7714,7716],{"class":1159,"line":1427},[1157,7697,7698],{"class":1223},"  console",[1157,7700,2535],{"class":1163},[1157,7702,6483],{"class":1219},[1157,7704,1224],{"class":1279},[1157,7706,1227],{"class":1181},[1157,7708,7709],{"class":1185},"Received:",[1157,7711,1227],{"class":1181},[1157,7713,1289],{"class":1163},[1157,7715,7647],{"class":1223},[1157,7717,1235],{"class":1279},[1157,7719,7720],{"class":1159,"line":1450},[1157,7721,1348],{"class":1163},[1492,7723,7725],{"id":7724},"并行请求making-parallel-requests","并行请求（Making parallel requests）",[1024,7727,7728,7729,7732],{},"当请求彼此不依赖时，你可以用 ",[1028,7730,7731],{},"Promise.all()"," 并行发起它们以提升性能。",[1148,7734,7736],{"className":1917,"code":7735,"language":1186,"meta":354,"style":354},"const { data } = await useAsyncData((_nuxtApp, { signal }) => {\n  return Promise.all([\n    $fetch('\u002Fapi\u002Fcomments\u002F', { signal }),\n    $fetch('\u002Fapi\u002Fauthor\u002F12', { signal }),\n  ])\n})\n\nconst comments = computed(() => data.value?.[0])\nconst author = computed(() => data.value?.[1])\n",[1028,7737,7738,7772,7784,7809,7834,7838,7844,7848,7882],{"__ignoreMap":354},[1157,7739,7740,7742,7744,7746,7748,7750,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770],{"class":1159,"line":1160},[1157,7741,1198],{"class":1197},[1157,7743,1201],{"class":1163},[1157,7745,1205],{"class":1204},[1157,7747,1208],{"class":1163},[1157,7749,1212],{"class":1211},[1157,7751,1216],{"class":1215},[1157,7753,2367],{"class":1219},[1157,7755,1224],{"class":1223},[1157,7757,1224],{"class":1163},[1157,7759,2705],{"class":1941},[1157,7761,1289],{"class":1163},[1157,7763,1201],{"class":1163},[1157,7765,2712],{"class":1941},[1157,7767,2715],{"class":1163},[1157,7769,1945],{"class":1197},[1157,7771,1260],{"class":1163},[1157,7773,7774,7776,7778,7780,7782],{"class":1159,"line":1194},[1157,7775,2040],{"class":1215},[1157,7777,2745],{"class":2744},[1157,7779,2535],{"class":1163},[1157,7781,2750],{"class":1219},[1157,7783,2753],{"class":1279},[1157,7785,7786,7788,7790,7792,7795,7797,7799,7801,7803,7805,7807],{"class":1159,"line":1238},[1157,7787,2758],{"class":1219},[1157,7789,1224],{"class":1279},[1157,7791,1227],{"class":1181},[1157,7793,7794],{"class":1185},"\u002Fapi\u002Fcomments\u002F",[1157,7796,1227],{"class":1181},[1157,7798,1289],{"class":1163},[1157,7800,1201],{"class":1163},[1157,7802,2712],{"class":1223},[1157,7804,1208],{"class":1163},[1157,7806,2778],{"class":1279},[1157,7808,1311],{"class":1163},[1157,7810,7811,7813,7815,7817,7820,7822,7824,7826,7828,7830,7832],{"class":1159,"line":1245},[1157,7812,2758],{"class":1219},[1157,7814,1224],{"class":1279},[1157,7816,1227],{"class":1181},[1157,7818,7819],{"class":1185},"\u002Fapi\u002Fauthor\u002F12",[1157,7821,1227],{"class":1181},[1157,7823,1289],{"class":1163},[1157,7825,1201],{"class":1163},[1157,7827,2712],{"class":1223},[1157,7829,1208],{"class":1163},[1157,7831,2778],{"class":1279},[1157,7833,1311],{"class":1163},[1157,7835,7836],{"class":1159,"line":1263},[1157,7837,2810],{"class":1279},[1157,7839,7840,7842],{"class":1159,"line":1294},[1157,7841,2616],{"class":1163},[1157,7843,1235],{"class":1223},[1157,7845,7846],{"class":1159,"line":1314},[1157,7847,1242],{"emptyLinePlaceholder":1241},[1157,7849,7850,7852,7854,7856,7859,7861,7863,7865,7867,7869,7871,7874,7877,7880],{"class":1159,"line":1324},[1157,7851,1198],{"class":1197},[1157,7853,3484],{"class":1204},[1157,7855,1212],{"class":1211},[1157,7857,7858],{"class":1219}," computed",[1157,7860,1224],{"class":1223},[1157,7862,2430],{"class":1163},[1157,7864,1945],{"class":1197},[1157,7866,1205],{"class":1223},[1157,7868,2535],{"class":1163},[1157,7870,4567],{"class":1223},[1157,7872,7873],{"class":1163},"?.",[1157,7875,7876],{"class":1223},"[",[1157,7878,7879],{"class":5046},"0",[1157,7881,2018],{"class":1223},[1157,7883,7884,7886,7889,7891,7893,7895,7897,7899,7901,7903,7905,7907,7909,7911],{"class":1159,"line":1331},[1157,7885,1198],{"class":1197},[1157,7887,7888],{"class":1204}," author",[1157,7890,1212],{"class":1211},[1157,7892,7858],{"class":1219},[1157,7894,1224],{"class":1223},[1157,7896,2430],{"class":1163},[1157,7898,1945],{"class":1197},[1157,7900,1205],{"class":1223},[1157,7902,2535],{"class":1163},[1157,7904,4567],{"class":1223},[1157,7906,7873],{"class":1163},[1157,7908,7876],{"class":1223},[1157,7910,5047],{"class":5046},[1157,7912,2018],{"class":1223},[2262,7914],{"title":7915,"video-id":7916,"platform":3404},"观看 Vue School 关于并行数据获取的视频","1024262536",[7918,7919,7920],"style",{},"html pre.shiki code .sF54B, html code.shiki .sF54B{--shiki-light:#39ADB5;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s6g6u, html code.shiki .s6g6u{--shiki-light:#E53935;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sXjFp, html code.shiki .sXjFp{--shiki-light:#9C3EDA;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .s0jeK, html code.shiki .s0jeK{--shiki-light:#39ADB5;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .s-Aze, html code.shiki .s-Aze{--shiki-light:#91B859;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .sV7Px, html code.shiki .sV7Px{--shiki-light:#9C3EDA;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sJTDI, html code.shiki .sJTDI{--shiki-light:#90A4AE;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sXPRQ, html code.shiki .sXPRQ{--shiki-light:#39ADB5;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .szyBz, html code.shiki .szyBz{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .srJn9, html code.shiki .srJn9{--shiki-light:#6182B8;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .smVNa, html code.shiki .smVNa{--shiki-light:#90A4AE;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .sOtFm, html code.shiki .sOtFm{--shiki-light:#E53935;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .sZqJ9, html code.shiki .sZqJ9{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .ssIVr, html code.shiki .ssIVr{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#FFAB70;--shiki-default-font-style:inherit;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sP6_D, html code.shiki .sP6_D{--shiki-light:#E53935;--shiki-default:#FFAB70;--shiki-dark:#F07178}html pre.shiki code .seQRr, html code.shiki .seQRr{--shiki-light:#E2931D;--shiki-default:#79B8FF;--shiki-dark:#FFCB6B}html pre.shiki code .si1Qm, html code.shiki .si1Qm{--shiki-light:#FF5370;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}html pre.shiki code .sOUxV, html code.shiki .sOUxV{--shiki-light:#F76D47;--shiki-default:#79B8FF;--shiki-dark:#F78C6C}html pre.shiki code .s0q4w, html code.shiki .s0q4w{--shiki-light:#39ADB5;--shiki-default:#79B8FF;--shiki-dark:#89DDFF}html pre.shiki code .s5Y2e, html code.shiki .s5Y2e{--shiki-light:#90A4AE;--shiki-default:#B392F0;--shiki-dark:#BABED8}html pre.shiki code .sJK67, html code.shiki .sJK67{--shiki-light:#E2931D;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .syA7L, html code.shiki .syA7L{--shiki-light:#E53935;--shiki-default:#B392F0;--shiki-dark:#F07178}",{"title":354,"searchDepth":1238,"depth":1238,"links":7922},[7923,7929,7932],{"id":1089,"depth":1194,"text":7924,"children":7925},"为何需要 useFetch 和 useAsyncData",[7926,7927],{"id":1494,"depth":1238,"text":1495},{"id":1520,"depth":1238,"text":7928},"关于 await 的说明",{"id":1675,"depth":1194,"text":553,"children":7930},[7931],{"id":1838,"depth":1238,"text":1839},{"id":2133,"depth":1194,"text":453},"md",{},"[object Object]",{"title":42,"description":43},"docs\u002F1.getting-started\u002F10.data-fetching","O42j8-LGMblMSV3bK-poktxpi9kvF5z9PRE_1Yqy1a4",1785179850986]