What exactly is namespacing of modules in vuex

Question

I have recently started with vuex.

The official docs explains well what modules are but i am not sure if i understood the namespaces in modules right.

Can anybody put some light on namespaces in a better way? When/why to use it?

Much appreciated.

Answer 1

When you have a big app with a very large state object, you will often divide it into modules.

Which basically means you break the state into smaller pieces. One of the caveats is that you can't use the same method name for a module since it is integrated into the same state, so for example:

moduleA {   actions:{     save(){}   } }  moduleB {   actions:{     //this will throw an error that you have the same action defined twice     save(){}   } } 

So in order to enable this you have the option to define the module as namespaced, and then you can use the same method in different modules:

moduleA {   actions:{     save(){}   },   namespaced: true }  moduleB {   actions:{       save(){}   },   namespaced: true } 

and then you call it like this:

this.$store.dispatch('moduleA/save') this.$store.dispatch('moduleB/save') 

Please note that it might complicate things a bit if you're using mapGetter or mapActions since the getters are now in the form of ['moduleA/client']

So use it only if you really need to.