I structured my Vuex store in several modules and now I'm facing a strange Vuex error that I am unable to solve:
Uncaught Error: [vuex] getters should be function but "getters.default" in module "customer" is {}.
at assert (vuex.esm.js?358c:97)
at eval (vuex.esm.js?358c:271)
at eval (vuex.esm.js?358c:85)
at Array.forEach (<anonymous>)
at forEachValue (vuex.esm.js?358c:85)
at eval (vuex.esm.js?358c:270)
at Array.forEach (<anonymous>)
at assertRawModule (vuex.esm.js?358c:265)
at ModuleCollection.register (vuex.esm.js?358c:191)
at eval (vuex.esm.js?358c:205)
The Structure of my Vuex store is build on the following pattern
- store
-- index.js
-- modules
--- customer
---- index.js
---- actions.js
---- getters.js
---- mutations.js
Here is my sores basic index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import customerModule from './modules/customer/index'
import globalModule from './modules/global/index'
import projectModule from './modules/project/index'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
customer: customerModule,
global: globalModule,
project: projectModule
}
})
my modules/customer/index.js:
import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'
const state = {
customers: []
}
export default {
namespaced: true,
state: state,
actions: actions,
mutations: mutations,
getters: getters
}
my modules/customer/getters.js:
const customers = state => state.customers
export default {
customers
}
I'm not quite sure what is going on here uand why I get this strange error.
Any ideas?
This is what worked for me, despite what you did being the example Vuex uses in the documentation.
Use
import getters from './getters'
instead of
import * as getters from './getters'