{"id":10880,"date":"2025-08-28T10:13:32","date_gmt":"2025-08-28T01:13:32","guid":{"rendered":"https:\/\/www.flying-h.co.jp\/media\/?p=10880"},"modified":"2025-09-09T07:45:33","modified_gmt":"2025-09-08T22:45:33","slug":"nuxt3-use-async-data","status":"publish","type":"post","link":"https:\/\/www.flying-h.co.jp\/media\/2025\/08\/28\/nuxt3-use-async-data\/","title":{"rendered":"Nuxt3\u3067useAsyncData\u3092\u81ea\u52d5\u7684\u306b\u518d\u30d5\u30a7\u30c3\u30c1\u3055\u305b\u308b"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u74b0\u5883<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nuxt3\uff083.17.4\uff09<\/li>\n\n\n\n<li>TypeScript<\/li>\n\n\n\n<li>SSG<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u8ab2\u984c<\/h2>\n\n\n\n<p>\u52d5\u7684\u30da\u30fc\u30b8\u306e\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\u3092\u5404\u30da\u30fc\u30b8\u306eslug\u306a\u3069\u3092\u30ad\u30fc\u306b\u3057\u3066API\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3001\u305d\u308c\u3092\u57fa\u306b\u751f\u6210\u3059\u308b\u3088\u3046\u306a\u3084\u308a\u65b9\u3067\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3057\u305f\u3002\u3053\u308c\u306b\u3001\u300c\u30da\u30fc\u30b8\u9077\u79fb\u6642\u306b\u3061\u3083\u3093\u3068\u5207\u308a\u66ff\u308f\u3063\u3066\u307b\u3057\u3044\u300d\u300cSSG\u30d3\u30eb\u30c9\u3057\u305f\u5f8c\u306fAPI\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u98db\u3070\u306a\u3044\u3088\u3046\u306b\u3057\u305f\u3044\u300d\u3068\u3044\u3046\u8981\u4ef6\u304c\u3042\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3001\ud83e\udd75<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>const { data: breadCrumbs } = await useAsyncData(\n  &#39;breadcrumbs&#39;,\n  async () =&gt; await getBreadCrumbList(),\n);\n\nwatch(\n  () =&gt; route.path,\n  async ()=&gt; {\n    breadCrumbs.value = await getBreadCrumbList();\n  },\n<\/code><\/pre><\/div>\n\n\n\n<p>\u8133\u76f4\u3067\u30eb\u30fc\u30c8\u3092watch\u3057\u3066\u307e\u3057\u305f\u3002\u826f\u3044\u5b50\u306f\u771f\u4f3c\u3057\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<br>\u3053\u308c\u3060\u3068\u3001SSG\u30d3\u30eb\u30c9\u5f8c\u3082\u30da\u30fc\u30b8\u9077\u79fb\u6642\u306bAPI\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u98db\u3093\u3067\u3057\u307e\u3044\u3001\u3088\u304f\u3042\u308a\u307e\u305b\u3093\ud83d\ude44 watch\u306f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u3067\u5b9f\u884c\u3055\u308c\u308b\u306e\u3067\u5f53\u305f\u308a\u524d\u3067\u3059\u3088\u306d\u3048\u3002\u3002\u3002\u3002\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u89e3\u6c7a\u7b56<\/h2>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>const { data: breadCrumbs } = await useAsyncData(\n  () =&gt; `breadcrumbs-${route.fullPath}`,\n  () =&gt; getBreadCrumbList(),\n);<\/code><\/pre><\/div>\n\n\n\n<p>\u30ad\u30fc\u3092\u52d5\u7684\u306b\u3057\u305f\u3053\u3068\u3067\u3001\u30eb\u30fc\u30c8\u304c\u5909\u308f\u308b\u3068\u81ea\u52d5\u7684\u306b\u30c7\u30fc\u30bf\u304c\u518d\u53d6\u5f97\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\ud83d\udc4f<br>SSG\u30d3\u30eb\u30c9\u5f8c\u306f\u30d3\u30eb\u30c9\u6642\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u4f7f\u308f\u308c\u308b\u305f\u3081\u3001\u5b9f\u884c\u6642\u306b\u65b0\u305f\u306aAPI\u30ea\u30af\u30a8\u30b9\u30c8\u306f\u767a\u751f\u3057\u307e\u305b\u3093\ud83e\udd73<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u53c2\u8003<\/h2>\n\n\n\n<p>\u3061\u3083\u3093\u3068\u516c\u5f0f\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u76ee\u3092\u901a\u3057\u307e\u3057\u3087\u3046\u2026\uff08\u81ea\u6212\uff09<br><a href=\"https:\/\/nuxt.com\/docs\/3.x\/api\/composables\/use-async-data#reactive-keys\" target=\"_blank\" rel=\"noopener\" title=\"useAsyncData \u00b7 Nuxt Composables v3\">https:\/\/nuxt.com\/docs\/3.x\/api\/composables\/use-async-data#reactive-keys<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u74b0\u5883 \u8ab2\u984c \u52d5\u7684\u30da\u30fc\u30b8\u306e\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\u3092\u5404\u30da\u30fc\u30b8\u306eslug\u306a\u3069\u3092\u30ad\u30fc\u306b\u3057\u3066API\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3001\u305d\u308c\u3092\u57fa\u306b\u751f\u6210\u3059\u308b\u3088\u3046\u306a\u3084\u308a\u65b9\u3067\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3057\u305f\u3002\u3053\u308c\u306b\u3001\u300c\u30da\u30fc\u30b8\u9077\u79fb\u6642\u306b\u3061\u3083\u3093\u3068\u5207\u308a\u66ff\u308f\u3063\u3066\u307b\u3057\u3044\u300d\u300cSSG\u30d3\u30eb\u30c9\u3057\u305f\u5f8c [&hellip;]<\/p>\n","protected":false},"author":34,"featured_media":10886,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,4],"tags":[],"class_list":["post-10880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","category-markup"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/posts\/10880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/comments?post=10880"}],"version-history":[{"count":6,"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/posts\/10880\/revisions"}],"predecessor-version":[{"id":10887,"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/posts\/10880\/revisions\/10887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/media\/10886"}],"wp:attachment":[{"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/media?parent=10880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/categories?post=10880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.flying-h.co.jp\/media\/wp-json\/wp\/v2\/tags?post=10880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}