Access vue vuex namespaced getter from template

22
votes

I have made vuex namespaced getter mapping in my .vue component like this:

...mapGetters([
  'fooModule/barGetter'
])

How do I access this getter in the .vue component template? I have tried {{fooModule.barGetter}} but it doesn't seem to work, {{fooModule/barGetter}} is obviously wrong.

I could assign another key to the getter in mapGetters by

...mapGetters({
    fooBarGetter: 'fooModule/barGetter'
})

This allows me to access the value in the template by using {{forBarGetter}}

However, I am wondering if there is a way to access the 'fooModule/barGetter' without assigning it another key. Is it possible? if so how?

3
vue.jsvuejs2vuex
Read this documantation page about getters. It explained everything. – ironcladgeek
Thanks @ironcladgeek for the docs link. I have read through the documentation already. One way to work around this issue is to assign a key in ...mapGetters by doing: ` ...mapGetters({fooBarGetter: 'fooModule/barGetter'}) ` Then i can access the value from the template with {{forBarGetter}} But I would like to know if it would be possible to use the getter in the template without assigning another key – Mohamed Hussain
I have edited the question to be more specific. Hope that helps – Mohamed Hussain

3 Answers

63
votes

The first parameter of mapGetters can be a namespace:

computed: {
    ...mapGetters("fooModule", [
        "barGetter"
    ]),
    ...mapGetters("anotherModule", [
        "someGetter"
    ])
}

That will make the value available as this.barGetter or just barGetter in templates. Note, it's perfectly acceptable to have multiple mapGetters statements.

Vuex Getters documentation

Vuex Binding helpers with namespace

3
votes

Well actually it's registered under the key 'fooModule/barGetter', which is not a valid name for a javascript variable. 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:

new Vue({
  el: '#app',
  store: new Vuex.Store({
    modules: {
      fooModule: {
        namespaced: true,
        state: {},
        getters: {
          barGetter() {
            return 'Hi :)';
          }
        }
      }
    }
  }),
  computed: Vuex.mapGetters([
    'fooModule/barGetter'
  ])
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  {{ _self['fooModule/barGetter'] }}
</div>
2
votes

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. 

...mapGetters({
    'activeItems': ACTIVE_ITEMS_GETTER_WITH_NAMESPACE
})

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.