Reset component state after navigation
I have a page that only includes 1 component (because I reuse it across multiple pages).
However, this leads to unexpected behavior: Whenever I navigate back to the page, it still has the old state.
Is there a way to make sure this state is reset after navigation, without having to manually do this?
ssr is off btw
according to chatgpt, the state should reset between mounts and unmounts, so maybe its a bug?
i currently use
22 Replies
How do you manage your state?
Any chances for minimal repro on Stackblitz?
for example
if user executes:
state.value.foo = 'baz'
and then exits the page
navigating back to the page still has state.foo set to baz
what can I use as boilerplate?https://nuxt.new/
@Revadike Did you fix it already? You seem very quiet π»
No
Been busy
I cant get it reproduced in a new environment
Here is the relevant code. Maybe you can spot the problem?
It would make sense if I would be coworker in your team. But I don't have time nor motivation to go through so many lines of unfamiliar code to spot something that does not belong there. If you cannot extract the faulty code and make it easy to run and fiddle with on StackBlitz or CodeSandbox, I'm out, sorry.
sure I can add you as collaborator, i appreciate your time and help!
what is your gh username
@J-Sekinvited
I started it locally. Can I reproduce the problem without filling out all the
FIREBASE_* variables?yeah start the emulators
Not really, but I managed to set them up. Please generate me a new Steam API Key. My account "does not meet the requirements for a developer API key".
Send via DM
Have you tried asking claude?
It's been really good at analyzing spaghetti and spotting potential causees of bugs
sure i'll try
prompt: find bugs plz
π
well, i actually asked chatgpt before and claude is giving me the same suggestions
basically, either reset manually, or force rerender. Neither really work for me.
rubber ducks are cheaper and don't make stuff up... I don't get what you kids see in these unsustainable pseudo-products pumped by venture capitalists' money (sorry for opinion plug, I don't want to start off-topic here)
lmao
You're completely free to hinder yourself by refusing to use a tool due to your own biases. But please refrain from diluting a conversation with an opinion plug in the future.
I've found much help using Large Language Models for advanced auto-complete (Github Co-Pilot) as well as rubber ducking, laying out a roadmap, brainstorming and code-generation (Claude).
It's the same as the javascript purists before the framework revolution where they refused to use any build tools because "it'll only make development process more cumbersome and harder". It's nonsense, if used correctly LLMs are amazing productivity tools that help developers build better, more qualitative products in a shorter amount of time.
Claude indeed suggests manually resetting but comes up with a few other clever solutions:
1. use
definePageMeta with keepalive: false
2. use a shallowRef instead of ref
Could you try these (individually) and see if the caching still persists?
Option 1 is useful if you want to ensure the entire page component is re-created on each visit.
Option 2 can be helpful if you're only changing top-level properties of the state object.yup tried these
turns out it was an issue re-assigning imports
Thanks @Jacek
Ah great π
Well... Claude was hardly clever here. It just pointed to a feature that loosely matches keywords and if you actually visit Nuxt documentation for
keepalive, you will learn that following its advice would be wrong thing to do and that it mostly lied.