Description
Version
Vue: 3.2.45
Vuex: 4.1.0
Reproduction link
https://github.com/lordolive/vuex4-getters-reactivity
Steps to reproduce
- Clone the repo
- npm i
- npm run dev
Then in website :
- Click the first button, the getter is reactive and the count increments.
- Click the second button to register the module
- Click the first button, the getter is no longer reactive and the count does not change.
What is expected?
The getter reactivity should still work and the count in the button should increment.
What is actually happening?
The getter accessed before the call to this.$store.registerModule() is no longer reactive, but the one that was not accessed before is still reactive
Additionnal comments
I first tried with MapGetters and had the same problem.
Using $store.getters.count directly in the template solve the issue, but in my real application with multiple modules it is simply not pratical, especially considering that we are migrating a lot of code from Vue 2 which was working with mapGetters.
Metadata
Metadata
Assignees
Labels
No labels
Activity
jkosir commentedon Nov 22, 2022
Experiencing the same issue, the problem is the replacement and stopping of
store._scope
in resetStoreState which is called when registering a new module.This stops currently active effectScope (
store._scope
) onto which all getters are bound and registers them again, which will cause any effect (computed, watch, e.g.count1
in reproduction example linked above) to become inactive and simply stop reacting to state changes.A workaround (non-feasible, but still) is to subscribe to
onScopeDispose
ofstore._scope
and re-register computed/watch effects you need, e.g. like this:@kiaking @posva (since you originally added and reviewed this in #1883) unless I'm missing something the replacement of
store._scope
shouldn't be needed (here)? If this is done then any effect referencing getters will become inactive and afaik there's no way to reactivate it from store.EDIT: Ah I see the entire state is also replaced, therefore all computed-wrapped getters need to be reinitialized too. But any existing effect linked to a store getter will then stop working, as it will still be linked to previous (now inactive) computed-wrapped getter.
catalin-bratu commentedon Dec 19, 2022
Any ETA till this bug will get fixed?
4refael commentedon Dec 30, 2022
This is a serious regression.
136759790 commentedon Mar 1, 2023
same problem
jaredplowman commentedon Apr 13, 2023
We're in the same boat, we narrowed it down to this change in resetStoreState as well
Interestingly enough any modules registered after the initial store still work without issue. We are rolling back to 4.0.2 for now.
ricardobuquet commentedon Apr 13, 2023
Same problem here, this is really annoying
danielmiksavmlyr commentedon Jun 28, 2023
Same problem for me - Vue 3.3.4 + Vuex 4.1.0. Thank you @jaredplowman for the tip with downgrading package. It solves this particular issue.
fix: avoid resetting store state when registering a dynamic module
fix: avoid resetting store state when registering a dynamic module
fix: avoid resetting store state when registering a dynamic module
Super-Chama commentedon Oct 13, 2023
Tracking the issue from #2217
It's unsettling why such crucial issue is not fixed still. aside from rolling back to 4.0.2 other way to fix this will be using functional getters. since functional getters are not cached by default they seems to work fine.
5 remaining items