fix(nuxt): use shared state for asyncData

[pi0]

🔗 Linked issue

nuxt/nuxt#13910 #5078 #5738

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

With the initial implementation of useAyncData, we were using a shared promise to avoid running two asyncData promises with the same key at the same time but the fetching state and data was not shared. It makes problems if someone tries to make a higher-order composable that returns a new instance of asyncData with the same key.

This PR resolves it using a shared _asyncData map in nuxtApp interface also adding tests from #5738 by @OhB00.

Remarks:

We probably can iterate over this. Normally each useAsyncData should be unique based on its key and a factory pattern shall be introduced for createAsyncData and createFetch (discussion: nuxt/nuxt#14736)

I will follow up with more PRs to have proper changelog.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	5b36d48
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/630de3dd4958f70008f56917

[danielroe]

@pi0 Have you checked whether this retains reactivity if this is created outside a component setup (eg in plugin), or when it is used after the original component that created it has unmounted?

[pi0]

You can try it (as mentioned in the description we need to iterate over to fix the related issue).

BTW really the use case of useAsyncData is to be used within the component lifecycle, not the plugins even if partially possible.

Good point about reactivity after unmounting. Will test this.