出现错误未捕获的错误：[vuex] getter 应该是函数，但“getters.getters”是 {}。将存储拆分为模块时在 VUEX 存储中

Question

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

谁能帮我解决这个错误。以下是文件内容的详细信息

文件夹结构：

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,

Answer 2

尝试更改 getter 导入：

import * as getters from './getters'