Проблема модулей Vuex с mapGetters (): геттеры должны быть функциональными
Я пытаюсь реструктурировать свой проект с помощью модулей Vuex. Если раньше все работало нормально, то теперь я получаю ошибку в своем приложении.компонент vue, связанный с модулем _ _ mapGetters w
vuex.esm.js?358c:97 Uncaught Error: [vuex] getters should be function but "getters.isAuthenticated" in module "login" is false.
Навигационные ссылки используют: v-if= "isAuthenticated", который является геттером в модуле входа
@ / 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 / 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'