3.0.1
https://codesandbox.io/s/kkrn0zojqr
Register ModuleJust like normal reactivity, I wouldn't expect the foo getter to re-run unless one of it's dependencies (state.foo) was changed.
Calling registerModule causes getters to re-execute regardless
This is more noticeable and more problematic if the getters return non-primitives, since they can then trigger re-renders down the component tree
This is what the Vue's reactivity system works. When an object property is touched, the entire object is added as dependency. As you are putting foo and module state on the same level in your example, adding module state will also triggers the update of the component which are using foo.
If you really want to avoid this behaviour, add it into some nested module.
@ktsn When you say add it into some nested module, do you mean add the foo property into a module? Or the dynamically added module?
I updated the Code Sandbox such that foo lives in a nested object now, but I still see the double render happening. What would need to be done such that adding a module to the root store doesn't impact every other root level key on the root state?
I mean the registered module should be nested.
https://codesandbox.io/s/myjy6r1989
Ahhh, OK - that's what I was missing. Thank you!
I have a similar, but somewhat deviating issue:
I have a "nested" module, in this module I register submodules. Everytime I register a submodule, the ones already available (siblings) get state reactivity triggered:
https://codesandbox.io/s/vuex-dynamic-module-re-render-kju2b
How does one avoid that?
Most helpful comment
I mean the registered module should be nested.
https://codesandbox.io/s/myjy6r1989