Проблема модулей 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'
2 2

2 ответа:

Вы уже создали магазин . В вашем модуле входа вам просто нужно экспортировать объект нет необходимости создавать новый магазин и экспортировать его

Поэтому в вашем модуле входа измените инструкцию export на простой экспорт объекта

export default {
    state,
    mutations,
    getters,
    actions
}

...mapGetters('login', ['isAuthenticated']}) также следует указать модуль