fix(nuxt): use shared state for useAsyncData

Author: pi0

packages/nuxt/src/app/composables/asyncData.ts

@@ -114,11 +114,16 @@ export function useAsyncData<
 
   const useInitialCache = () => (nuxt.isHydrating || options.initialCache) && nuxt.payload.data[key] !== undefined
 
-  const asyncData = {
-    data: ref(useInitialCache() ? nuxt.payload.data[key] : options.default?.() ?? null),
-    pending: ref(!useInitialCache()),
-    error: ref(nuxt.payload._errors[key] ?? null)
-  } as AsyncData<DataT, DataE>
+  // Create or use a shared asyncData entity
+  if (!nuxt._asyncData[key]) {
+    nuxt._asyncData[key] = {
+      data: ref(useInitialCache() ? nuxt.payload.data[key] : options.default?.() ?? null),
+      pending: ref(!useInitialCache()),
+      error: ref(nuxt.payload._errors[key] ?? null)
+    }
+  }
+  // TODO: Else, Soemhow check for confliciting keys with different defaults or fetcher
+  const asyncData = { ...nuxt._asyncData[key] } as AsyncData<DataT, DataE>
 
   asyncData.refresh = (opts = {}) => {
     // Avoid fetching same key more than once at a time

packages/nuxt/src/app/nuxt.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { getCurrentInstance, reactive } from 'vue'
+import { getCurrentInstance, reactive, Ref } from 'vue'
 import type { App, onErrorCaptured, VNode } from 'vue'
 import { createHooks, Hookable } from 'hookable'
 import type { RuntimeConfig, AppConfigInput } from '@nuxt/schema'
@@ -66,6 +66,11 @@ interface _NuxtApp {
   [key: string]: any
 
   _asyncDataPromises: Record<string, Promise<any> | undefined>
+  _asyncData: Record<string, {
+    data: Ref<any>
+    pending: Ref<boolean>
+    error: Ref<any>
+   }>,
 
   ssrContext?: NuxtSSRContext
   payload: {
@@ -113,6 +118,7 @@ export function createNuxtApp (options: CreateOptions) {
     }),
     isHydrating: process.client,
     _asyncDataPromises: {},
+    _asyncData: {},
     ...options
   } as any as NuxtApp