鍍金池/ 問答/HTML/ 獲取store的getters,Cannot read property 'ge

獲取store的getters,Cannot read property 'getters' of undefined

采用了vue-element-admin里面的登錄權(quán)限判斷,基本都按里面引入和加載了,但是還是會提示報(bào)錯(cuò)
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) {
    // 讓每個(gè)請求攜帶token-- ['X-Token']為自定義key 請根據(jù)實(shí)際情況自行修改
    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)
})

然后請求的時(shí)候,老是報(bào)錯(cuò)Cannot read property 'getters' of undefined

回答
編輯回答
毀了心

request.js打印那句那里明顯寫錯(cuò)了啊,store前面多了個(gè).

2017年3月11日 20:22
編輯回答
笑忘初

你在main.js引入store后在組件里面可以通過this.$store.getters.token 調(diào)用token方法
或者在組件內(nèi)

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

在組件里面調(diào)this.token()

2018年7月27日 09:19
編輯回答
背叛者

應(yīng)該是request.js中store的引入路徑錯(cuò)了,或者store目錄下的數(shù)據(jù)沒有成功導(dǎo)出,所以store變成了undefined,調(diào)用getters報(bào)錯(cuò)

2017年9月11日 13:28