Access vue vuex namespaced getter from template

user_7755293 0
Viewed 21850

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?

vuejs2 vuex vue.js
4 Answers

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.

user_31424080 
this.$store.getters.productName

in template, ex:

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