I am trying to improve vuex module but getting error below:

Uncaught Error: [vuex] getters should be function but "getters.getComments" in module "ments" is [].

/stores/ments.js (module)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    ments: []
}

const getters = {
    getComments: state => statements
}
const mutations = {
    setComments(state, ments) {
        statements = ments
    }
}

const actions = {
    setComments(context, data) {
        contextmit('setComments', data)
    }
}
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

and here is my store.js that contains root state of the vuex store.js

import Vue from 'vue';
import Vuex from 'vuex';
import mentsModule from './stores/ments'
Vue.use(Vuex);
const state = {
}

const getters = {
}

const mutations = {
}

const actions = {

}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    modules: {
        ments: mentsModule
    },
    actions
})

Can you please help me to solve this issue. Tried but not understand what is the issue?

I am trying to improve vuex module but getting error below:

Uncaught Error: [vuex] getters should be function but "getters.getComments" in module "ments" is [].

/stores/ments.js (module)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    ments: []
}

const getters = {
    getComments: state => state.ments
}
const mutations = {
    setComments(state, ments) {
        state.ments = ments
    }
}

const actions = {
    setComments(context, data) {
        context.mit('setComments', data)
    }
}
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

and here is my store.js that contains root state of the vuex store.js

import Vue from 'vue';
import Vuex from 'vuex';
import mentsModule from './stores/ments'
Vue.use(Vuex);
const state = {
}

const getters = {
}

const mutations = {
}

const actions = {

}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    modules: {
        ments: mentsModule
    },
    actions
})

Can you please help me to solve this issue. Tried but not understand what is the issue?

• javascript
• vue.js
• vuex

• should not create a new Store inside a module file, and then export a new store to a supposedly the store itself. the code of the store itself is missing. – LiranC Commented Oct 29, 2017 at 12:05
• @LiranC actually, its not missing. I didn't shared the store.js because it's only includes the module inside of it – kaankilic Commented Oct 29, 2017 at 12:09
• i think you should include it, something is strange. – LiranC Commented Oct 29, 2017 at 12:16
• @LiranC I've add it on post – kaankilic Commented Oct 29, 2017 at 12:19

2 Answers 2

• You are creating store instance in store.js which is good
• You are creating another store instance inside ment.js which is not good

As a start, Try to Change the export block on ment.js to this:

export default {
    state,
    getters,
    mutations,
    actions
}

Try this more modular way ;) :

Move your getters to an external module.

for example in app/js/store/getters.js:

export const getComments = state => {
    return state.ments;
};

And inside of app/js/store/index.js for example:

import Vue from 'vue';
import Vuex from 'vuex';
import * as getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        ments: [],
    },
    getters,
    // ...
});