鍍金池/ 問答/HTML/ vuex的mutations中用axios請求數(shù)據(jù),根據(jù)返回的值來判斷跳到不同的

vuex的mutations中用axios請求數(shù)據(jù),根據(jù)返回的值來判斷跳到不同的頁面,報錯

問題描述

vuex的mutations中用axios請求數(shù)據(jù),根據(jù)返回的值來判斷跳到不同的頁面,報錯

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

這個需求是這樣的 有一個接口在多個頁面需要用,而且還有好多判斷,我就想放到vuex里面進行多次調(diào)用 ,可是在mutations里面跳轉(zhuǎn)報錯

我嘗試用
this.$store.dispatch('getCertificationStatus',this.$router)
把this.$router傳過去,但是還是不可以

改后
調(diào)用
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'})//點擊跳到未認證頁面
          }

相關(guān)代碼

// 請把代碼文本粘貼到下方(請勿用圖片代替代碼)

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'})//審核通過等待打款,點擊跳到平臺轉(zhuǎn)款頁面
          }
          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'})//點擊跳到平臺轉(zhuǎn)款金額考核成功頁面
          }
          if(res.data.content == "NATURAL_BANK_FAILED"){
            this.$router.push({path:'/user/cardFail'})//點擊跳到平臺轉(zhuǎn)款金額考核失敗頁面
          }
    }
  })
}

你期待的結(jié)果是什么?實際看到的錯誤信息又是什么?

圖片描述

回答
編輯回答
祈歡

我試了 確實可以了 只是因為axios是異步所以放在actions里面嗎

2017年3月11日 14:23
編輯回答
維她命

老鐵,你需要把你的那個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'})//點擊跳到未認證頁面
          }
    }
  })
}

你調(diào)用的時候注意要傳入這個vm,getCertificationStatus(this)注意你這個調(diào)用的話,一定要在vue里面調(diào)用哦,不然這個this任然指向的不是你的vue實例


更新
你注意不要傳this.$router啊,你傳vue實例this就夠了。

--
你試一下把這個寫成actions,其實按理來說,異步請求ajax應(yīng)該寫成actions的,不應(yīng)該寫在mutation里面,mutation只負責一些同步的操作。你actions請求到數(shù)據(jù)之后,再去分發(fā)mutations,試一下這樣。

2017年12月7日 17:52