Vuex: registerModule causing unneccesary getter evaluations

Created on 2 Jan 2019  路  5Comments  路  Source: vuejs/vuex

Version

3.0.1

Reproduction link

https://codesandbox.io/s/kkrn0zojqr

Steps to reproduce

  • Open the code sandbox
  • Open the console
  • Reload the sandbox and note the log of "Running Getter"
  • Click Register Module
  • Note that "Running Getter" is logged again, even though state.foo hasn't changed

What is expected?

Just like normal reactivity, I wouldn't expect the foo getter to re-run unless one of it's dependencies (state.foo) was changed.

What is actually happening?

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

Most helpful comment

I mean the registered module should be nested.
https://codesandbox.io/s/myjy6r1989

All 5 comments

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?

https://codesandbox.io/s/kkrn0zojqr

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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

taoeffect picture taoeffect  路  3Comments

jdittrich picture jdittrich  路  3Comments

gorbypark picture gorbypark  路  3Comments

niallobrien picture niallobrien  路  3Comments

gongzza picture gongzza  路  3Comments