Why is there multiple triggering of actions/mutations when using dynamic module registration in vuex?

Question

Vue.js

I'm learning vue, there was a problem using dynamic connection of vuex modules.
There is a module that is used only in one section of the application, it hung the registration of the module on the beforeRouteEnter router hook, and the removal of the module on the beforeRouteLeave hook.
Immediately after registration, an action is called that loads data for the connected module from the server.
When you first enter the section, everything works as it should. On subsequent logins, the number of action calls starts to increase.
What could be the reason for this behavior?

Answer 1

Understood the problem.
The module was removed incorrectly.
The beforeRouteEnter hook does not have access to the component via this, so you need to use next

beforeRouteEnter(to, from, next) {
      next((vm) => {
          // vm ссылается на компонент
      });
    },

I tried to do the same in the beforeRouteLeave hook to disable the module, but this did not work, the module was not removed. Each time you entered the section, an additional module was registered, multiple action calls appeared.
I took a closer look at the documentation, it turned out that in beforeRouteLeave you can use this to work with the component, rewrote the hook

beforeRouteLeave(to, from, next) {
      this.$store.unregisterModule(name);
      next();
    },

Now everything works as it should