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?

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