Vuexモジュールで_mapGetters（）が発行されました：ゲッターが関数である必要があります

Question

Vuexモジュールを使用してプロジェクトを再構築しようとしています。 すべては以前、私が今

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

__mapGettersワットモジュールに関連し、私のApp.vueコンポーネントのエラーを取得していますNAVリンクが使用している細かい動作していた場合は、次のゲッターである=「にisAuthenticated」V-場合ログインモジュールに

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

私vuexプロジェクト構造は現在、次のとおりです。

 src 
     |_ vuex 
      L_ modules 
        L_ login 
        | |_ index.js 
        | |_ mutation_types.js 
        |_ shoppinglist 
         L_ index.js 
         |_ mutation_types.js 
     |_ App.vue 
     |_ main.js 

@/vuex /ストア

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 /モジュール/ログイン/ 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 /ログイン/ mutation_types

export const IS_AUTHENTICATED = 'IS_AUTHENTICATED' 
export const CURRENT_USER_ID = 'CURRENT_USER_ID' 

Answer 1

既にストアを作成しています。あなただけのオブジェクトに新しいストアを作成し、ログインモジュールでそれに

をエクスポートする必要をエクスポートしないために必要なログインモジュールで は、エクスポートステートメントを変更するだけでプレーンなオブジェクトをエクスポートする

export default { 
    state, 
    mutations, 
    getters, 
    actions 
} 

Answer 2

...mapGetters('login', ['isAuthenticated']}) また、モジュールを指定する必要があります