Access vue vuex namespaced getter from template

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>

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