UseState with a state coming from a db
Hello, I've issue with reactive state for useState, I fetch players from a DB and place them into the global state, but the components getting the global state are not updating to get the version that is coming from client side rendering when i load the page from another page.
This is my composables that I use in parent:
I've tried using my useState in my computed prop it didnt work either.
I retrieve it like so in child:
I am pretty new to vue/nuxt sorry.
I do not know if this is a good way to use the global store either
Each component are children of each other so I could've done prop drilling or injection. I think it would be a better fit ig, but I wanna know if what I want to do is possible
7 Replies
I was also using global state bcs I had to pass into a to a lot of different children but each one used it so... Maybe I am using global state wrong. This is also a quesiton when you would use global state.
if you simply want to display the players of the db try
and in your component
this approach does not use global state but it seems like it suits your needs.
useFetch deduplicates the requests automatically, so on page load all components will trigger only one request. more here
useFetch
does not prevent multiple fetches, if you use that composable in e.g. 4 components it will fetch 4 times.
You can prevent that by define the cachedata:
This will make sure your fetch does not trigger multiple times. But you need to call the refresh()
method, in case you want to load the data again.
From docs:
useFetch
is the same as
Just with "auto key generation" based on URL and options passed for the request.
---
If you rely on multiple global states, i would recommend pinia for store / state management:
https://nuxt.com/modules/pinia
Stores are in the nuxt context ,so they are builded very similar to composables itself.
stores/my-store.ts
But you cannot initialize the state itself in the store. Since the hydration of the state between SSR und CSR are after the execution / initialization of the store itself.
I handle that with middlewares whenever i have global states which are e.g. delivered by an api:
middlewares/context.global.ts
In components you can access the state with:
at least in the docs it says
key: a unique key to ensure that data fetching can be properly de-duplicated across requests, if not provided, it will be automatically generated based on URL and fetch options
Yep, but:
https://stackblitz.com/edit/nuxt-starter-zckkxt
I'm with you, it should be prevent the fetching, at least for simple cases like:
But only setting a
key
option, will prevent duplicated requests, when used in multiple components.I created an issue for it:
https://github.com/nuxt/nuxt/issues/28169
GitHub
useFetch only prevents multiple requests when
key
option is set ·...Environment Operating System: Darwin Node Version: v20.11.0 Nuxt Version: 3.12.3 CLI Version: 3.12.0 Nitro Version: 2.9.7 Package Manager: bun@1.1.18 Builder: - User Config: compatibilityDate, devt...
Thanks