使用vuex,在请求数据时提示" Cannot read property 'dispatch' of undefined"

刚学习vuex,今天在写登录注册时,使用了vuex保存了登录成功时,服务端返回的数据,但是在axios请求时,却提示“TypeError: Cannot read property 'dispatch' of undefined”
代码如下:
state.js:

const state = {
  userInfo: {
    avatar: '', // 登录头像
    nickname: '', // 登录昵称
    signature: '', // 个性签名
    userId: '', // 用户Id
    token: '' // token
  }
}

getters.js

export const getUserInfo = state => state.userInfo

mutation-types.js

export const SET_USERINFO = 'SET_USERINFO'

mutations.js

const mutations = {
  [types.SET_USERINFO] (state, user) {
    state.userInfo = user
  }
}

actions.js

setUserInfo ({commit}, user) {
    window.window.sessionStorage.user = JSON.stringify(user)
    commit(types.SET_USERINFO, user)
}

methods: {

...mapActions({
  setUserInfo: 'setUserInfo'
}),
onLogin () {
  if (this.loginstate.$invalid === false) {
    var datas = '&mobile=' + this.phonenumber + '&password=' + this.password
    this.$axios.post('/api/Auth/Login', datas, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(res => {
      let user = {
        avatar: res.data.data.avatar,
        nickname: res.data.data.nickname,
        signature: res.data.data.signature,
        token: res.data.data.token,
        userId: res.data.data.user_id
      }
      this.setUserInfo(user) // 加上这行代码,就会在catch中提示我‘TypeError: Cannot read property 'dispatch' of undefined’,但是正常数据又是能够请求到的,请问是哪里出了问题?
      console.log(this.setUserInfo(user))
      if (res.data.code != 0) {
        Toast({
          message: res.data.data.msg,
          position: 'bottom'
        })
      } else {
        this.$router.push('/home')
      }
    })
    .catch(err => console.log(err)) 
  }
}

}

运行结果:

![clipboard.png](/img/bV1988)
阅读 24.2k
2 个回答

action.js里是怎样的,

const actions=[
setUserInfo ({commit}, user) {
    window.window.sessionStorage.user = JSON.stringify(user)
    commit(types.SET_USERINFO, user)
}]

这样的吗?
然后Vue.use(Vuex)调用了吗

找到原因了,是因为我没有在main.js中引用配置好vuex

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题