Skip to content

Getters - Reactivity broken after registering new module #2197

@lordolive

Description

@lordolive

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

image

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.

Activity

jkosir

jkosir commented on Nov 22, 2022

@jkosir

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 of store._scope and re-register computed/watch effects you need, e.g. like this:

store._scope.run(() => {
	installWatcher()
})

function installWatcher () {
	onScopeDispose(() => {
	    installWatcher()
	})
	watch(() => ...)
})

@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

catalin-bratu commented on Dec 19, 2022

@catalin-bratu

Any ETA till this bug will get fixed?

4refael

4refael commented on Dec 30, 2022

@4refael

This is a serious regression.

136759790

136759790 commented on Mar 1, 2023

@136759790

same problem

jaredplowman

jaredplowman commented on Apr 13, 2023

@jaredplowman

We're in the same boat, we narrowed it down to this change in resetStoreState as well

Object.defineProperty(store.getters, key, {
   /*good->*/     get: () => computedObj[key](),
   /*bad->*/     // get: () => computedCache[key].value,
        enumerable: true // for local getters
      });

Interestingly enough any modules registered after the initial store still work without issue. We are rolling back to 4.0.2 for now.

ricardobuquet

ricardobuquet commented on Apr 13, 2023

@ricardobuquet

Same problem here, this is really annoying

danielmiksavmlyr

danielmiksavmlyr commented on Jun 28, 2023

@danielmiksavmlyr

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.

Super-Chama

Super-Chama commented on Oct 13, 2023

@Super-Chama

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

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @jkosir@4refael@renatodeleao@zangab@Super-Chama

      Issue actions

        Getters - Reactivity broken after registering new module · Issue #2197 · vuejs/vuex