CODEWITHSUNDEEP
javascriptvue.jsvuexgetter
gaurav rauthan
gaurav rauthan

Reputation: 51

Getting error Uncaught Error: [vuex] getters should be function but "getters.getters" is {}. in VUEX store when store is split into modules

I am new to VUEX and build a test application while learning VUEX. I have split my VUEX store into modules with each module having its own getter.js file. Getters, actions, mutations are imported into individual index.js for each module which is further imported into the main store index.js file. I am getting the error "Uncaught Error: [vuex] getters should be function but "getters.getters" is {}." on the browser while displaying the website. Also I was trying to achieve this with the map helpers

Can someone please help me resolve this error. Details are available below for the file content

Folder structure:

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 file content is:

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>

Upvotes: 5

Views: 5989

Answers (2)

Хасан Шадияров
Хасан Шадияров

Reputation: 37

Try to change getters importing on:

import * as getters from './getters'

Upvotes: 0

stackoverfloweth
stackoverfloweth

Reputation: 6917

looks like the problem is that you're defining getters as an object with 1 parameter of getters. Change that just just getters: getters, or even better embrace ES6 and write that like

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

Upvotes: 3

Related Questions