Vuex Module Problem mit _mapGetters(): Getter sollte Funktion sein

Question

Ich versuche, mein Projekt mit Vuex-Module neu zu strukturieren. Wenn alles gut vorher lief, bin ich jetzt einen Fehler in meiner App.vue Komponente bekommen,

zu __mapGetters w Modul

vuex.esm.js?358c:97 Uncaught Error: [vuex] getters should be function but "getters.isAuthenticated" in module "login" is false. 

Die nav Links verwenden bezogen werden: v-if = "IsAuthenticated", die ein Getter im Login-Modul

@/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> 

meine vuex Projektstruktur ist jetzt:

 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

Sie haben bereits ein Geschäft erstellt. In Ihrem Login-Modul müssen Sie nur das Objekt keine Notwendigkeit für den Export einen neuen Speicher zu erstellen und es

so in Ihrer Login-Modul die Exportanweisung ändern exportiere nur

export default { 
    state, 
    mutations, 
    getters, 
    actions 
} 

Answer 2

...mapGetters('login', ['isAuthenticated']}) Sie sollten auch das Modul angeben