Open Paalt opened 2 years ago
A workaround is to not access the store in the template directly, but to use computed properties.
@danielroe See https://codesandbox.io/s/amazing-visvesvaraya-n6etwp?file=/pages/index.vue for a reproduction.
Yes, this is an unavoidable consequence of the Nuxt 2 fetch implementation (which entails stringifying the entire component state). I'd recommend avoiding useFetch
and using useAsync
instead for more granular control of what is added to the Nuxt payload...
@Paalt I have used the onServerPrefetch
hook, and it's work for me.
Can someone more knowledgeable explain what the downsides of using onServerPrefetch
instead of useFetch
? Is useFetch
just capable of being either server-side or client-side, as well as adhoc instead of just server prefetch?
Basically, am I safe in assuming that if onServerPrefetch
is a totally fine place for my fetch in my use case, then I'm fine using it instead of useFetch
?
I am using Pinia for state management but there seem to be a compatibility issue with composition-api. Specifically the useFetch function.
The error happens when I am using useFetch in my setup function and return an imported Pinia store to the template and refreshes the page. (It works fine when navigating to the page) This will result in:
Steps to reproduce the behavior: @pinia/nuxt": "0.1.8", "@nuxtjs/composition-api": "0.31.0", "nuxt": "2.15.8",
In a component:
Removing store from the return statement makes everything work fine again. So you can have both pinia store and useFetch in setup function as long as you dont use store in the template. But you often have the need for both.