Vuex Modules issue with _mapGetters() : getters should be function - vue.js

Question

I am trying to restructure my project using Vuex Modules.
If everything was running fine previously, I am now getting an error in my App.vue component, related to __mapGetters w module
vuex.esm.js?358c:97 Uncaught Error: [vuex] getters should be function but "getters.isAuthenticated" in module "login" is false.
The nav links are using : v-if="isAuthenticated" which is a getter in the Login module
#/App.vue
<template>
<div id="app">
<header id="header">
<nav>
<ul class="navigation">
<li id="home"><router-link :to="{ name: 'home' }">Home</router-link></li>
<li id="login" v-if="!isAuthenticated"><router-link :to="{ name: 'login' }">Login</router-link></li>
....
</template>
<script>
import store from '#/vuex/store'
import router from '#/router/index'
import { mapGetters } from 'vuex'
export default {
name: 'app',
computed: {
...mapGetters({ isAuthenticated: 'isAuthenticated' })
},
methods: {
logout () {
return this.$store.dispatch('logout')
.then(() => {
window.localStorage.removeItem('vue-authenticate.vueauth_token')
this.$router.push({ name: 'home' })
})
}
},
store,
router
}
</script>
my vuex project structure is now :
src
|_ vuex
L_ modules
L_ login
| |_ index.js
| |_ mutation_types.js
|_ shoppinglist
L_ index.js
|_ mutation_types.js
|_ App.vue
|_ main.js
#/vuex/store
import Vue from 'vue'
import Vuex from 'vuex'
import login from '#/vuex/modules/login'
import shoppinglist from '#/vuex/modules/shoppinglist'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
login,
shoppinglist
}
})
#vuex/modules/login/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation_types'
import vueAuthInstance from '#/services/auth.js'
Vue.use(Vuex)
const state = {
isAuthenticated: vueAuthInstance.isAuthenticated(),
currentUserId: ''
}
const actions = {
login: ({ commit }, payload) => {
payload = payload || {}
return vueAuthInstance.login(payload.user, payload.requestOptions)
.then((response) => {
// check response user or empty
if (JSON.stringify(response.data) !== '{}') {
commit(types.IS_AUTHENTICATED, { isAuthenticated: true })
commit(types.CURRENT_USER_ID, { currentUserId: response.data.id })
return true
} else {
commit(types.IS_AUTHENTICATED, { isAuthenticated: false })
commit(types.CURRENT_USER_ID, { currentUserId: '' })
return false
}
})
},
logout: ({commit}) => {
commit(types.IS_AUTHENTICATED, { isAuthenticated: false })
commit(types.CURRENT_USER_ID, { currentUserId: '' })
return true
}}
const getters = {
isAuthenticated: (state) => {
return state.isAuthenticated
}
}
const mutations = {
[types.IS_AUTHENTICATED] (state, payload) {
state.isAuthenticated = payload.isAuthenticated
},
[types.CURRENT_USER_ID] (state, payload) {
state.currentUserId = payload.currentUserId
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
#/vuex/login/mutation_types
export const IS_AUTHENTICATED = 'IS_AUTHENTICATED'
export const CURRENT_USER_ID = 'CURRENT_USER_ID'

Answer 1

You have already created a store .
In your login module you just need to export the object no need to create a new store and export it
so in your login module change the export statement to just export a plain object
export default {
state,
mutations,
getters,
actions
}

Answer 2

...mapGetters('login', ['isAuthenticated']})
you should also specify the module