vuex的mutations中用axios请求数据，根据返回的值来判断跳到不同的页面，报错

Question

问题描述

vuex的mutations中用axios请求数据，根据返回的值来判断跳到不同的页面，报错

问题出现的环境背景及自己尝试过哪些方法

这个需求是这样的 有一个接口在多个页面需要用，而且还有好多判断，我就想放到vuex里面进行多次调用 ，可是在mutations里面跳转报错

我尝试用
this.$store.dispatch('getCertificationStatus',this.$router)
把this.$router传过去，但是还是不可以

改后
调用
methods:{

state : function(){
    this.$store.dispatch('getCertificationStatus',this)
}

store.js

getCertificationStatus(state,vm){
    return new Promise((resolve, reject) => {
        axios.post('/realNameUtils/gotoStatusPage')
      .then((res)=>{
        if(res.data.content == "NOT_REALNAME"){
            vm.$router.push({path:'/user/info'})//点击跳到未认证页面
          }

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

getCertificationStatus(state){
    return new Promise((resolve, reject) => {
        axios.post('/realNameUtils/gotoStatusPage')
      .then((res)=>{
        if(res.data.content == "NOT_REALNAME"){
            this.$router.push({path:'/user/info'})//点击跳到未认证页面
          }
          if(res.data.content == "NATURAL_SUBMIT"){
            this.$router.push({path:'/user/review'})//点击跳到个人审核页面
          }
          if(res.data.content == "NATURAL_BASEINFO_FAILED"){
            this.$router.push({path:'/user/fail'})//基本信息未通过，点击跳到审核失败页面
          }
          if(res.data.content == "NATURAL_BASEINFO_SUCCESS"){
            this.$router.push({path:'/user/waitFor'})//审核通过等待打款，点击跳到平台转款页面
          }
          if(res.data.content == "NATURAL_PAY_FAILED"){
            this.$router.push({path:'/user/cardreFill'})//打款fail用户重填银行卡界面
          }
          if(res.data.content == "NATURAL_PAY_SUCCESS"){
            this.$router.push({path:'/user/firmMoney'})//打款OK填写核验金额3次机会
          }
          if(res.data.content == "NATURAL_BANK_SUCCESS"){
            this.$router.push({path:'/user/success'})//点击跳到平台转款金额考核成功页面
          }
          if(res.data.content == "NATURAL_BANK_FAILED"){
            this.$router.push({path:'/user/cardFail'})//点击跳到平台转款金额考核失败页面
          }
    }
  })
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

老铁，你需要把你的那个vue对象传入mutation，不然你mutation中的this指向的不是vue对象。

getCertificationStatus(state, vm){
    return new Promise((resolve, reject) => {
        axios.post('http://XXXXX/realNameUtils/gotoStatusPage')
      .then((res)=>{
        if(res.data.content == "NOT_REALNAME"){
            vm.$router.push({path:'/user/info'})//点击跳到未认证页面
          }
    }
  })
}

你调用的时候注意要传入这个vm，getCertificationStatus(this)注意你这个调用的话，一定要在vue里面调用哦，不然这个this任然指向的不是你的vue实例。

---

更新
你注意不要传this.$router啊，你传vue实例this就够了。

--
你试一下把这个写成actions，其实按理来说，异步请求ajax应该写成actions的，不应该写在mutation里面，mutation只负责一些同步的操作。你actions请求到数据之后，再去分发mutations，试一下这样。

Answer 2

我试了 确实可以了 只是因为axios是异步所以放在actions里面吗