How to define getters on vuex module?

Question

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

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

/stores/comments.js (module)

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

Vue.use(Vuex);

const state = {
    comments: []
}

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

const actions = {
    setComments(context, data) {
        context.commit('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 commentsModule from './stores/comments'
Vue.use(Vuex);
const state = {
}

const getters = {
}

const mutations = {
}

const actions = {

}

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

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

Answer 1

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

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

export default {
    state,
    getters,
    mutations,
    actions
}