Vuex: Creating a new module via registerModule calling unrelated watches

[doonetheprune]

Whenever I create a new module using registerModule an unrelated watcher is fired in the below component. The module created is not related to the existing scope module in anyway.

Vue.component('component-test', {
    template: _template,
    props: {
        propA: {}
    },
    data: function() {
        return {
            data: 'a'
        };
    },
    watch: {
        'scope.contacts.selected': function(newVal, oldVal) {
            console.log('I am called but why???');
        }
    },
    computed: {
        scope: function() {
            return this.$store.state.scope;
        }
    }
});

[ktsn]

Hi, thanks for reporting this issue.
Can you please provide live reproduction on jsfiddle or codepen etc?

[yyx990803]

Currently when you register a new module, the store is considered reset. This will trigger all watchers that are watching the store state.

[doonetheprune]

Is this is something, that will be changed in a future version i.e will there be an option to stop a store reset on register.

[ktsn]

I maybe wrong but I noticed we can avoid this behavior.
We currently reset the state of old inner Vue instance explicitly when a new module is added. I guess we can just omit this process if the reset is caused by registering a new module because the state reset is for hot update.

[mojodev]

This issue still persist in v3.1.1. i have loaded one module dynamically using registerModule on a page. one of my parent component is watching other module state variable. so while registering module, watcher on unrelated module state is firing. same thing happening for unRegisterModule. @yyx990803 please have a look on this.

[mojodev]

Anyone has solution to ignore firing watchers on module registration or unregistration?

[mojodev]

any update regarding this issue ?

[ThomasKientz]

@mojodev To prevent firing watchers when registering a new module, add a property with the name of the future module you wish to register in the main store with a null value :

// main store
state() {
  return {
    auth : null,
  }
},

then :

Store.registerModule('auth', {...})

[disovi]

To workaround this issue for dynamically created modules, when module name is known only at runtime - a nested store can be used:
javascript const nestedRoot = 'nestedRoot'; // register nested root store.registerModule(nestedRoot, { namespaced: true, state: {}, }); const someDynamicName = 'someId'; // register nested modules, rootStore is not updated sotre.registerModule([nestedRoot, someDynamicName], { // dynamic module data });