vue.js - _mapGetters() : getters should be function 的 Vuex 模块问题

Question

我正在尝试使用 Vuex 模块重组我的项目。 如果之前一切正常，我现在在我的 App.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"，它是登录模块中的一个 getter

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

Answer 1

您已经创建了一家商店。 在您的登录模块中，您只需导出对象，无需创建新商店并导出它

因此在您的登录模块中将导出语句更改为仅导出一个普通对象

export default {
    state,
    mutations,
    getters,
    actions
}