Responses from two components using useAsyncData with different Props values are identical about nuxt HOT 4 CLOSED

As you rightly note, this is because you set the key when the component is first loaded (to an empty string).

We might consider allowing a getter function for the key but this would entail entirely changing the way async data is implemented.

from nuxt.

Start a new pull request in StackBlitz Codeflow.

• github-57k4ba (Open reproduction)

from nuxt.

Because you don't stringify the object, leading to key_[Object Object] being the key.

Exemplary workaround:

const { data } = await useAsyncData(`key_${JSON.stringify(props.query)}`, async () => {

from nuxt.

I want to ask that initially, the values of props are all empty strings, and when useAsyncData uses the values in props as keys, it causes the response data of both components to be linked. I have thought of a solution to pass in a constant to differentiate or if there is a better way to solve this.

You can check the link below:
https://stackblitz.com/edit/github-57k4ba?file=components%2FFetchDataByProps.vue

from nuxt.