CODEWITHSUNDEEP
vuexnuxt.js
Igal
Igal

Reputation: 6103

Moving Nuxt store to modules mode generates 'getters should be function' error

Since classic mode is going to be deprecated soon, I'm trying to move my store to modules mode. However I do want to keep state, actions, mutations and getters in separate files. So lets say I currently only have one module - auth. This is my store structure:

store
 |_ modules
 |  |_auth
 |    |_actions.js
 |    |_getters.js
 |    |_mutations.js
 |    |_state.js
 |
 |_actions.js
 |_auth.js
 |_getters.js
 |_index.js
 |_mutations.js
 |_state.js

store\modules\auth\state.js currently has only one property:

export const state = () => {
  return {
    token: null
  }
}

This is store\modules\auth\getters.js

export const getters = {
  isAuthenticated(state) {
    return !!state.token
  }
}

Then in my store\auth.js:

import {actions} from './modules/auth/actions'
import {getters} from './modules/auth/getters'
import {mutations} from './modules/auth/mutations'
import {state} from './modules/auth/state'

export {
  actions,
  getters,
  mutations,
  state
}

And finally in my store\index.js I only have this code:

export default {
  namespaced: true,
  strict: true
}

This gives me the following error: [vuex] getters should be function but "getters.getters" in module "modules.auth" is {}.

I've been scratching my head for hours now and don't know how to tackle that.

I tried to do something like that, for example:

export const getters = () => {
  return {
    isAuthenticated: state => !!state.token
  }
}

That did compile, but in the console it threw another error: [vuex] unknown getter: auth/isAuthenticated

And it also gives me this warning: store/modules/auth/state.js should export a method that returns an object

And there I thought I do that...

Any ideas, please?

Upvotes: 3

Views: 1173

Answers (1)

Igal
Igal

Reputation: 6103

Finally managed to solve it. Maybe someone will find it helpful.

First of all, my export of getters was wrong. This is the correct way to do it:

export default {
  isAuthenticated(state) {
    return !!state.token
  }
}

Same thing about the state:

export default () => ({
  token: null
})

And then I had to move the auth module from modules to folder to be under store folder. I also removed index.js and auth.js files.

store
 |_auth
 | |_actions.js
 | |_getters.js
 | |_mutations.js
 | |_state.js
 |
 |_actions.js
 |_getters.js
 |_mutations.js
 |_state.js

Now everything worked just fine!

Upvotes: 10

Related Questions