Question

我正在尝试使用Vuex模块重构我的项目。如果以前一切运行正常，我现在在我的App.vue组件中收到一个与__mapGetters w module相关的错误

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 /存储

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']}) you should also specify the module

使用_mapGetters（）的Vuex模块问题：getter应该是函数

2 个答案: