如何在vuex模块上定义getter？

Question

我正在努力改进vuex模块，但是在下面出现了错误：

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

/stores/comments.js (模块)

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
})

下面是我的store.js，它包含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
})

你能帮我解决这个问题吗？试过了，但不明白是什么问题？

Answer 1

• 您正在store.js中创建store.js实例，即good
• 您正在创建，在comment.js中创建另一个 store实例，即不是很好的

首先，尝试将comment.js上的导出块更改为：

export default {
    state,
    getters,
    mutations,
    actions
}

Answer 2

尝试这种更模块化的方式;)：

将您的getter移动到外部模块。

例如，在app/js/store/getters.js中

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

例如，在app/js/store/index.js内部：

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

Vue.use(Vuex);

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