Access vue vuex namespaced getter from template

Question

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?

Kuroshio

Read this documantation page about getters. It explained everything. – Lederhosen

Thanks @Lederhosen 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 – Kuroshio

I have edited the question to be more specific. Hope that helps – Kuroshio

Answer 1

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

Demy

This isn't working for me...also the documentation linked in this answer does not link to namespaced Getters. There's slight nuances between the two from what I can see. – Cloudy

@WindUpLordVexxos Namespaced getters should work just the same. The helpers will properly add "/" between namespaces. Additional information can be found here: vuex.vuejs.org/guide/… – Demy

Answer 2

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>

Rickierickman

Answer 3

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.

Hy

This has never worked for me, so in this case is should ACTIVE_ITEMS_GETTER_WITH_NAMESPACE be fooModule/barGetter? – Dipper

Answer 4

this.$store.getters.productName

in template, ex:

<vs-td width="20%">{{$store.getters.productName}}</vs-td>

Communicant