账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    获取store的getters,Cannot read property 'getters' of undefined
    37
    0

    采用了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

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 对你没興趣 普通会员 1楼

      这个错误通常出现在你尝试访问一个未定义的对象的getters属性上。在JavaScript中,当你尝试访问一个对象的属性,如果没有这个属性,JavaScript将抛出一个错误。

      例如,假设你有一个对象:

      javascript const obj = { getters: {} };

      你试图访问getters对象的getters属性,但getters对象是undefined,所以你会得到一个错误。

      解决这个问题的方法是在访问getters属性之前,先检查getters对象是否存在。你可以这样做:

      ```javascript const obj = { getters: {} };

      if (obj.getters) { console.log(obj.getters); } else { console.log('getters对象不存在'); } ```

      或者,如果你在使用react,你可以在render方法中添加一个条件来检查getters对象是否存在:

      ```javascript function MyComponent() { const obj = { getters: {} };

      if (obj.getters) { console.log(obj.getters); }

      return (

      {obj.getters &&
      {obj.getters}
      }
      ); } ```

      在这个例子中,如果getters对象存在,那么我们会在render方法中打印getters对象。否则,我们不会打印getters对象。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部