javascript - 当商店被拆分成模块时，在 VUEX 商店中出现错误 Uncaught Error : [vuex] getters should be function but "getters.getters" is {}.

Question

我是VUEX新手，在学习VUEX的同时搭建了一个测试应用。我已将我的 VUEX 存储拆分为多个模块，每个模块都有自己的 getter.js 文件。 Getters、 Action 、突变被导入到每个模块的单独 index.js 中，这些模块进一步导入到主存储 index.js 文件中。我收到错误“未捕获错误:[vuex] getters 应该是函数，但“getters.getters”是 {}。”在显示网站时在浏览器上。我也试图通过 map 助手来实现这一点

谁能帮我解决这个错误。文件内容详见下方

文件夹结构:

store
 modules
  coaches
   action.js
   getter.js
   action.js
   index.js
  requests
   action.js
   getter.js
   action.js
   index.js
 index.js

coaches/index.js 文件内容为:

import { createStore } from "vuex";
import mutations from "./mutations.js";
import actions from "./actions.js";
import getters from './getter.js';

export default createStore({
  namespaced: true,
  state: {
      coaches: [
        {
          id: "c1",
          firstname: "Gau",
          lastname: "Rau",
          area: "[finance,javascript,analysis]",
          description: "devloper for fun",
          age: "38",
        },
        {
          id: "c2",
          firstname: "Ran",
          lastname: "Bi",
          area: "[insurance,SQL,analysis]",
          description: "photographer for fun",
          age: "37",
        }
      ]
    },
  mutations: mutations,
  actions: actions,
  getters: {getters},
});

**coaches/getter.js file content:**

   

     export default {
            coacheslist(state){
                return state.coaches;
            },
            hasCoaches(state){
                return state.coaches && state.coaches.length >0;
            }
        };

**store/index.js file content is:**

import { createStore } from "vuex";
import CoachModule from "./modules/coaches/index.js";
import RequestModule from "./modules/requests/index.js";

export default createStore({
  modules: {
    Coaches: CoachModule, 
    Requests: RequestModule}
});

**File content which calls the getter:**

<script>
export default {
  computed: {
    filteredCoaches(){
      return this.$store.getters['Coaches/coacheslist']
    }
  }
}
</script>

Answer 1

看起来问题在于您将 getter 定义为具有 1 个 getters 参数的对象。改变它只是 getters: getters，或者更好地拥抱 ES6 并像这样写

export default createStore({
  namespaced: true,
  state: {
      ...
  },
  mutations,
  actions,
  getters,