获取store的getters，Cannot read property 'getters' of undefined

Question

采用了vue-element-admin里面的登录权限判断，基本都按里面引入和加载了，但是还是会提示报错
main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

login.vue

export default {
  data () {
    return {
      userName: '',
      passWord: ''
    }
  },
  methods: {
    verify () {
      if (this.userName === '') {
        mui.toast('用户名不能为空！', { duration: 'long', type: 'div' })
        return false
      }
      if (this.passWord === '') {
        mui.toast('密码不能为空！', { duration: 'long', type: 'div' })
        return false
      }
      return true
    },
    login () {
      let result = this.verify()
      if (result) {
        let data = {
          username: this.userName,
          password: this.passWord
        }
        this.$store.dispatch('LoginByUsername', data).then(() => {
          this.$router.push({ path: '/' })
          // mui.toast('登陆成功', { duration: 'long', type: 'div' })
        }).catch(() => {
          // mui.toast(res.msg, { duration: 'long', type: 'div' })
        })
      } else {
        console.log('error submit!!')
        return false
      }
    }
  }
}

login.js

import request from '@/utils/request'
export function loginByUsername (username, password) {
  const data = {
    username,
    password
  }
  return request({
    url: '/User/login',
    method: 'post',
    data
  })
}

user.js

import { loginByUsername, logout, getUserInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/index'
  actions: {
    // 用户名登录
    LoginByUsername ({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        loginByUsername(username, userInfo.password).then(response => {
          const data = response.data
          console.log(data)
          commit('SET_TOKEN', data.token)
          setToken(response.data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
 }

request.js

import axios from 'axios'
import mui from 'mui'
import store from '@/store'
import { getToken } from '@/utils/index'
// request interceptor
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
    config.headers['XX-Token'] = getToken()
  }
  console.log('token +'.store.getters.token)
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

然后请求的时候，老是报错Cannot read property 'getters' of undefined

Answer 1

request.js打印那句那里明显写错了啊，store前面多了个.

Answer 2

应该是request.js中store的引入路径错了，或者store目录下的数据没有成功导出，所以store变成了undefined,调用getters报错

Answer 3

你在main.js引入store后在组件里面可以通过this.$store.getters.token 调用token方法
或者在组件内

import { mapGetters } from 'vuex'
methods: {
    ...mapGetters(['token']),
}

在组件里面调this.token()

Answer 4

你的store.js也没贴出来啊，应该是没写对

const store = new Vuex.Store({
  state: {
    // token: ''
  },
  getters: {
    token: (state, getters) => {
      return 'token'
    },
    roles: (state, getters) => {
      return []
    }
  }
})