I am unable to access the getters from one of my Vuex modules in my ponent, even though I can see the getter in Vue Dev Tools.

My store.js file:

import Vue from 'vue';
import Vuex from 'vuex';
import subsub from './modules/subsub';

Vue.use(Vuex);
export default new Vuex.Store({
  state: { },
  actions: { },
  mutations: { },
  getters: { },
  modules: {
    subsub,
  },
});

My modules/subsub.js file:

const state = {
  categories: [{
    name: 'one',
    path: 'two',
    ...
  }, {
    name: 'twocat',
    path: 'two',
    ...
  }],
};

const actions = { };
const mutations = { };
const getters = {
  filterCategories(state) {
    return state.categories;
  },
  filtertwo(state) {
    const filteri = state.categories.filter((catee) => {
      return catee.name === 'twocat';
    });
    return filteri;
  },
};

export default {
  namespaced: true,
  state,
  actions,
  mutations,
  getters,
};

My ponent:

<template>
  <div> {{ filterCategories }} </div>
</template>

<script>    
import { mapGetters } from 'vuex';

export default {
  puted: {
    ...mapGetters([
      'categories',
      'filtertwo',
      'filterCategories',
    ]),
    filtertwo() {
      return this.$store.getters.filtertwo;
    },
    filterCategories() {
      return this.$store.getters.filterCategories;
    },
  },

</script>

So, what I am missing? Is there any other syntax for accessing the getters from modules?

I am unable to access the getters from one of my Vuex modules in my ponent, even though I can see the getter in Vue Dev Tools.

My store.js file:

import Vue from 'vue';
import Vuex from 'vuex';
import subsub from './modules/subsub';

Vue.use(Vuex);
export default new Vuex.Store({
  state: { },
  actions: { },
  mutations: { },
  getters: { },
  modules: {
    subsub,
  },
});

My modules/subsub.js file:

const state = {
  categories: [{
    name: 'one',
    path: 'two',
    ...
  }, {
    name: 'twocat',
    path: 'two',
    ...
  }],
};

const actions = { };
const mutations = { };
const getters = {
  filterCategories(state) {
    return state.categories;
  },
  filtertwo(state) {
    const filteri = state.categories.filter((catee) => {
      return catee.name === 'twocat';
    });
    return filteri;
  },
};

export default {
  namespaced: true,
  state,
  actions,
  mutations,
  getters,
};

My ponent:

<template>
  <div> {{ filterCategories }} </div>
</template>

<script>    
import { mapGetters } from 'vuex';

export default {
  puted: {
    ...mapGetters([
      'categories',
      'filtertwo',
      'filterCategories',
    ]),
    filtertwo() {
      return this.$store.getters.filtertwo;
    },
    filterCategories() {
      return this.$store.getters.filterCategories;
    },
  },

</script>

So, what I am missing? Is there any other syntax for accessing the getters from modules?

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuex

• You're not getting any errors in the console? Are you passing in the store when you instantiate Vue? – thanksd Commented May 3, 2017 at 18:20
• I am not getting any errors in the console. what do you mean to pass in the store when I instantiate Vue ?? .. by the way I tried using @click event for getter and that even didn't work – Marketingexpert Commented May 3, 2017 at 18:22
• Wherever you instantiate the main app Vue ponent (probably main.js). You should be importing the vuex store and including that in the config object passed in new Vue({...}) – thanksd Commented May 3, 2017 at 18:42
• /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', ponents: { App, Icon }, }); – Marketingexpert Commented May 3, 2017 at 18:56

2 Answers 2

First, you don't have a getter for categories, so you need to add one.

Second, your subsub module has its namespaced property set to true. This means that you need to provide the module name to the mapGetter helper:

...mapGetters('subsub', [
  'categories',
  'filtertwo',
  'filterCategories',
]),

Third, the mapGetters function creates the filtertwo, and filterCategories puted properties for you. But, you are redefining them manually, returning the explicit reference to the $store.getters. However, you aren't referencing the namespace correctly, so they are returning undefined. Either get rid of these puted properties or reference the namespace correctly:

filtertwo() {
  return this.$store.getters['subsub/filtertwo'];
},
filterCategories() {
  return this.$store.getters['subsub/filterCategories'];
},

I found the solution, thnx to hints from @thanksd

By using the example above where namespaced is set true I had to add the following to the ponent

filterCategories() {
      return this.$store.getters['subsub/filterCategories'];
    },

Otherwise, if I didn't want to add the subsub, I could just set the namespaced to false. This issue took me a while to get my head around. Cheers