鍍金池/ 問答/C#  HTML/ vuex中actions請求的數(shù)據(jù)提交給mutations,組件中獲取到參數(shù)如何

vuex中actions請求的數(shù)據(jù)提交給mutations,組件中獲取到參數(shù)如何根據(jù)參數(shù)操作下面

問題描述

vuex中actions請求的數(shù)據(jù)提交給mutations,組件中獲取到參數(shù)如何根據(jù)參數(shù)操作下面

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

import {mapState} from 'vuex'
    computed: {
        // certificationStatus() {
        //     return this.$store.state.certificationStatus;
        // }
        ...mapState([
            "certificationStatus"
          ])
    },

getStateNatural:function(){

            this.$store.dispatch('getCertificationStatus',this).then(()=>{
                console.log(this.certificationStatus)
            })
        }

相關(guān)代碼

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

getCertificationStatus(context, vm){
return new Promise((resolve, reject) => {
      axios.post('/realNameUtils/gotoStatusPage')
      .then((res)=>{
            context.commit('certificationStatus',res.data.content)
            resolve()
            })
        })
}

mutations.js

certificationStatus(state,data){
    state.certificationStatus = data
}

組件

    computed: {
        certificationStatus() {
            return this.$store.state.certificationStatus;
        }
    },

方法methods

    getStateNatural:function(){
            this.$store.dispatch('getCertificationStatus',this)
            console.log(this.$store.state.certificationStatus)
            if(this.certificationStatus == "NATURAL_SUBMIT"){
                this.$router.push({path:'/user/review'})//點(diǎn)擊跳到個(gè)人審核頁面
            }
            if(this.certificationStatus == "NATURAL_BASEINFO_FAILED"){
                this.$router.push({path:'/user/fail'})//基本信息未通過,點(diǎn)擊跳到審核失敗頁面
            }
            if(this.certificationStatus == "NATURAL_BASEINFO_SUCCESS"){
                this.$router.push({path:'/user/waitFor'})//審核通過等待打款,點(diǎn)擊跳到平臺(tái)轉(zhuǎn)款頁面
            }
            if(this.certificationStatus == "NATURAL_PAY_FAILED"){
                this.$router.push({path:'/user/cardreFill'})//打款fail用戶重填銀行卡界面
            }
            if(this.certificationStatus == "NATURAL_PAY_SUCCESS"){
                this.$router.push({path:'/user/firmMoney'})//打款OK填寫核驗(yàn)金額3次機(jī)會(huì)
            }
            if(this.certificationStatus == "NATURAL_BANK_SUCCESS"){
                this.$router.push({path:'/user/success'})//點(diǎn)擊跳到平臺(tái)轉(zhuǎn)款金額考核成功頁面  實(shí)名成功
            }
            if(this.certificationStatus == "NATURAL_BANK_FAILED"){
                this.$router.push({path:'/user/cardFail'})//點(diǎn)擊跳到平臺(tái)轉(zhuǎn)款金額考核失敗頁面
            }
        },
        getStateLegal:function(){
            if(this.stateRoute == "LEGAL_TO_PERFECT"){
                this.$router.push({path:'/user/perfect'})//待完善
            }
            if(this.stateRoute == "LEGAL_SUBMIT"){
                this.$router.push({path:'/user/assess'})//點(diǎn)擊跳到審核頁面
            }
            if(this.stateRoute == "LEGAL_MANAGER_FAILED"){
                this.$router.push({path:'/user/assessFail'})//點(diǎn)擊跳到審核未通過頁面
            }
            if(this.stateRoute == "LEGAL_MANAGER_SUCCESS"){
                this.$router.push({path:'/user/qiyeWaitFor'})//管理員信息通過等待打款
            }
            if(this.stateRoute == "LEGAL_PAY_FAILED"){
                this.$router.push({path:'/user/qiyeCardreFill'})//打款fail用戶重填銀行卡界面
            }
            if(this.stateRoute == "LEGAL_PAY_SUCCESS"){
                this.$router.push({path:'/user/qiyefirmMoney'})//打款OK填寫核驗(yàn)金額3次機(jī)會(huì)
            }
            if(this.stateRoute == "LEGAL_BANK_FAILED"){
                this.$router.push({path:'/user/qiyecardFail'})//銀行卡金額失敗聯(lián)系客服
            }
            if(this.stateRoute == "LEGAL_BANK_SUCCESS"){
                this.$router.push({path:'/user/qiyesuccess'})//實(shí)名OK
            }
            if(this.stateRoute == "LEGAL_FROZEN"){
                this.$router.push({path:'/user/qiyesuccess'})//法人實(shí)名凍結(jié)
            } 
        }

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

獲取不到 this.certificationStatus 這個(gè)狀態(tài)值 是undefined 我在組件的data里面定義了certificationStatus也不行

打印this.$store.state 可以打印出來
圖片描述

回答
編輯回答
乞許

dispatch 是異步的, 你在state 設(shè)置certificationStatus之前去獲取了,當(dāng)然是 undefined 了,

// 組件內(nèi)

this.$store.dispatch('actionA').then(() => {
  // ...
})

在提交之后 then 一下, 把你的邏輯判斷加入到then 的回調(diào)中

2018年9月21日 16:53
編輯回答
奧特蛋

使用getters解決了 可是異步的原因

2018年5月25日 04:12