//Sets data to store in useAsyncData\r\n {{ store.data }} //Initial value instead of data there\r\n \u003Cmy-component-that-rely-on-store/> //Reactivity is lost for this guy\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nThe reason behind this as I understand looks like this:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cslot/> //Inits useAsyncData, leaves to separate flow after first await\r\n {{ store.data }} //Would be valid, if would not initiated on async\r\n \u003Cmy-component-that-rely-on-store/> //useAsyncData has been called, but not completed\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n## Solution\r\n\r\n### New (probably SSR-only) hook\r\n\r\nInproduce new hook, that will fire after all asyncDatas will be completed and most of components rendered\r\n\r\n### New component\r\n\r\nThe name could be like `\u003Cnuxt-server-rendered>`, `\u003Cnuxt-server-init>`, e.t.c.\r\n\r\nComponent will rely on this new hook and could use `onServerPrefetch` under-the-hood. Then it could be used like this:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cslot/> //Inits useAsyncData, leaves to separate flow after first await\r\n \u003Cnuxt-server-rendered>\r\n {{ store.data }} //Valid data\r\n \u003Cmy-component-that-rely-on-store/> //Valid data\r\n \u003C/nuxt-async-resolve>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nIt will also resolve reactivity problems with parent components, and not only async problems, the problem that was described in issues/discussion above.\r\n\r\n## Pure implementation\r\n\r\nI've tried to implement this by myself using this:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cslot/>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\nonServerPrefetch(async () => {\r\n await Promise.allSettled(Object.values(toValue(app._asyncDataPromises)));\r\n});\r\n\u003C/script>\r\n```\r\n\r\nThis solution is not good actually, but it goes as workaround with limitations:\r\n- I have no guarantee that _asyncDataPromises are complete on this stage\r\n- I can only use this component after page's \u003Cslot>, therefore I currently can't use it with components above page, e.g. header\r\n- It does not rely on render or anything like that (if that's even possible at all in current SSR implementation)\r\n\r\nI could try to implement this myself, if this looks valid, but I'm not sure I can do that with my limited knowlenge of Nuxt's internals. \n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[1997],{"name":1985,"color":1986},25316,"Allow to await for useAsyncData in template","2024-06-30T11:06:12Z","https://github.com/nuxt/nuxt/issues/25316",0.70457613,{"labels":2004,"number":2011,"owner":1988,"repository":1988,"state":2012,"title":2013,"updated_at":2014,"url":2015,"score":2016},[2005,2008],{"name":2006,"color":2007},"enhancement","8DEF37",{"name":2009,"color":2010},"2.x","d4c5f9",6517,"closed","Add example on how to use with @vue/composition-api","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6517",0.67304087,{"description":2018,"labels":2019,"number":2021,"owner":1988,"repository":1988,"state":2012,"title":2022,"updated_at":2023,"url":2024,"score":2025},"### Describe the feature\n\nCurrently when we have two components in the same page with something like this: \r\n\r\n```js\r\n// Let's assume asyncFunction is a fetch request that works.\r\n\r\n// component1.vue\r\nconst { data: data1 } = await useLazyAsyncData('bananas', asyncFunction)\r\n\r\n// component2.vue\r\nconst { data: data2 } = await useLazyAsyncData('bananas', asyncFunction)\r\n```\r\n2 requests are fired instead of any other better alternative like the dedupe `defer` or `cancel`. This might be a bug or some bad interpretation but in my reproduction (https://stackblitz.com/edit/github-dcn4nk?file=components%2FFetchCatInfo.vue,app.vue) that's the behaviour I get.\r\n\r\nThere are solutions in the user land like Vue Query but I think this should work in the core framework too! :)\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [X] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2020],{"name":1985,"color":1986},29196,"useAsyncData | Dedupe requests on the the server and client (by caching the promises)","2024-09-27T14:28:27Z","https://github.com/nuxt/nuxt/issues/29196",0.6757882,{"labels":2027,"number":2033,"owner":1988,"repository":1988,"state":2012,"title":2034,"updated_at":2035,"url":2036,"score":2037},[2028,2029,2032],{"name":2006,"color":2007},{"name":2030,"color":2031},"3.x","29bc7f",{"name":2009,"color":2010},11647,"Feature Request asyncProps","2023-01-22T15:52:59Z","https://github.com/nuxt/nuxt/issues/11647",0.6848668,{"labels":2039,"number":2045,"owner":1988,"repository":1988,"state":2012,"title":2046,"updated_at":2047,"url":2048,"score":2049},[2040,2041,2042],{"name":2006,"color":2007},{"name":2030,"color":2031},{"name":2043,"color":2044},"app","17512D",11813,"global vue composition api usage","2023-01-19T15:48:42Z","https://github.com/nuxt/nuxt/issues/11813",0.68901217,{"description":2051,"labels":2052,"number":2057,"owner":1988,"repository":1988,"state":2012,"title":2058,"updated_at":2059,"url":2060,"score":2061},"Context: https://github.com/nuxt/nuxt.js/issues/14927, https://github.com/nuxt/nuxt.js/issues/14927\r\n\r\n`useState` is primarily to preserve **initial** state between client and server. `useAsyncData` should be ideally used to store data but sometimes, it is more convenient to use `useState` and direct async logic to fill it. (usage in nuxt/content document-driven mode).\r\n\r\nWe can introduce new `useData` composable that acts almost same as `useState` but is explicitly marked as **page data** and can be extracted to the static payloads.\r\n\r\nAlternatives: \r\n- `useState` to always be extracted (like 3.0.0.rc.1) => It introduces network when it is really initial state and same between pages\r\n- `useState` to track changes => Not sure if possible at all for server but even if is, a custom async logic might initializes it **before** composable. It also makes implementation more complex internally\r\n- `useAsyncData` => Seems not fitting for all\r\n",[2053,2056],{"name":2054,"color":2055},"discussion","538de2",{"name":2030,"color":2031},14924,"`useData` composable","2023-01-19T17:42:46Z","https://github.com/nuxt/nuxt/issues/14924",0.69079673,{"labels":2063,"number":2069,"owner":1988,"repository":1988,"state":2012,"title":2070,"updated_at":2071,"url":2072,"score":2073},[2064,2067,2068],{"name":2065,"color":2066},"stale","ffffff",{"name":1985,"color":1986},{"name":2009,"color":2010},7884,"Async data return typed data with TypeScript","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7884",0.6909797,{"description":2075,"labels":2076,"number":2079,"owner":1988,"repository":1988,"state":2012,"title":2080,"updated_at":2081,"url":2082,"score":2083},"### Describe the feature\r\n\r\nCommon use case: performing some asynchronous actions, but not when the component is loaded, but in response to user actions. It would be very useful to have a utility that offers the same api as `useAsyncData`, but writes the callback function not when the component is mounted, but only when it is explicitly called\r\n\r\n```vue\r\n\u003Cscript setup>\r\nconst { error, pending, execute, data } = useAsyncAction(\r\n // The first argument is nuxt context to be consistent with useAsyncData. \r\n // All next arguments passed from `execute` call\r\n (ctx, event) => $fetch('api/save-data', new FormData(event.target)) \r\n) \r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n\u003Cform @submit.prevent=\"execute\">\r\n \u003Cdiv v-if=\"error\">Failed to save data to server {{error}}\u003C/div>\r\n \u003Cdiv v-else-if=\"pending\">Saving ...\u003C/div>\r\n \u003Cdiv v-else-if=\"data\">Succesfully saved\u003C/div>\r\n\u003C/form>\r\n\u003C/template>\r\n```\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2077,2078],{"name":2030,"color":2031},{"name":1985,"color":1986},15673,"Provide `useAsyncAction` helper function","2023-03-28T14:09:45Z","https://github.com/nuxt/nuxt/issues/15673",0.6918074,{"description":2085,"labels":2086,"number":2088,"owner":1988,"repository":1988,"state":2012,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: -\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\n[https://stackblitz.com/edit/nuxt-starter-bpyqqk?embed=1&file=pages%2Fbad.vue](url)\n\n\n**good case**\n\n```\nconst ss_sl = ref(0);\n// useGoodSSRFetch defined in composables\nconst { data, error, refresh } = useGoodSSRFetch(\n 'https://api.kuleu.com/api/suijimima',\n 'GET',\n { ss_sl } // The parameter type is: ref\n);\n\nconst next = async () => {\n ss_sl.value++;\n console.log('count-->', ss_sl.value);\n\n refresh();\n};\n```\n\n**bad case**\n```\nconst ss_sl = ref(0);\n// useBadSSRFetch defined in composables\nconst { data, error, refresh } = useBadSSRFetch(\n 'https://api.kuleu.com/api/suijimima',\n 'GET',\n { ss_sl: ss_sl.value } // The parameter type is: value\n);\n\nconst next = async () => {\n ss_sl.value++;\n console.log('count-->', ss_sl.value);\n\n refresh();\n};\n```\n\n### Describe the bug\n\nI encapsulated the useAsyncData function under ‘composables’, and the call in the vue file was successful and I got the first page data, but when I wanted to get the second page data via 'refresh', I found that if the 'page' parameter is of the value type, I can only get the first page forever, but if the input parameter is a ref, I can get the subsequent pages normally.\n\n我在‘composables’目录下对‘useAsyncData’进行了封装,在vue文件中成功调用并得到了第1页数据,但当我想通过‘refresh’获取第2页数据时,我发现如果传入的'page'参数是值类型时,虽然我修改了'page'参数的值为2,但我仍然获取到第1页;但如果传入参数是ref类型则可以正常获取后续的页面。\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2087],{"name":1985,"color":1986},29846,"useAsyncData cannot be refreshed with ref-value in 'composables'","2024-12-19T13:54:49Z","https://github.com/nuxt/nuxt/issues/29846",0.6943483,["Reactive",2094],{},["Set"],["ShallowReactive",2097],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"FWyBaE8nx8dSyuT-y4joM2wr1TpdsDA-Frnyyd93ZBc":-1},"/nuxt/icon/128"]