Vuex Get Namespaced Getters

Posted on  by admin
Sometimes, we want to access the getter from another Vuex module.

In this article, we’ll look at how to access the getter from another Vuex module.

To access the getter from another Vuex module, we can get them from the rootGetters parameter.

For instance, we write. to create a Vuex.Store instance with the someGetter getter.

In it, we get the someOtherGetter getter with rootGetters.someOtherGetter. And we get the namespaced bar/someOtherGetter getter with rootGetters["bar/someOtherGetter"].

To access the getter from another Vuex module, we can get them from the rootGetters parameter.

The first parameter of mapGetters can be a namespace:.

That will make the value available as this.barGetter or just barGetter in templates.
LeffLeff
1,434
1

So you should access the key as a string, ah, and so, it's not so elegant. But you can still do it, access it in the template with {{ _self['fooModule/barGetter'] }}. See this working example:. For anyone who wants to achieve this without specifying the namespace as a first parameter, there's also a possibility to pass object/map to mapGetters with already namespaced names of the getters.

This is extremely useful when you have constants with namespaced names of mutations, getters and actions. In our case, we have lots of modules and it sometimes time consuming to look up the module our getter, mutation or action is inside.

This is why we add namespace to our constants. Due to using a single state tree, all states of our application are contained inside one big object.

However, as our application grows in scale, the store can get really bloated. To help with that, Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules - it's fractal all the way down:.

cellocello
5,168

Module Reuse #