Vuex Modules issue with _mapGetters() : getters should be function

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'

Capstan

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
}

Acicula

Answer 2

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

Detour

Thanks @Samundra for your feedback... actually no need for the module name in this case , I guess it's needed with namespaced module , I'll check – Capstan