vuex中actions请求的数据提交给mutations,组件中获取到参数如何根据参数操作下面

Question

问题描述

vuex中actions请求的数据提交给mutations,组件中获取到参数如何根据参数操作下面

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

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)
            })
        }

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
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'})//点击跳到个人审核页面
            }
            if(this.certificationStatus == "NATURAL_BASEINFO_FAILED"){
                this.$router.push({path:'/user/fail'})//基本信息未通过，点击跳到审核失败页面
            }
            if(this.certificationStatus == "NATURAL_BASEINFO_SUCCESS"){
                this.$router.push({path:'/user/waitFor'})//审核通过等待打款，点击跳到平台转款页面
            }
            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填写核验金额3次机会
            }
            if(this.certificationStatus == "NATURAL_BANK_SUCCESS"){
                this.$router.push({path:'/user/success'})//点击跳到平台转款金额考核成功页面  实名成功
            }
            if(this.certificationStatus == "NATURAL_BANK_FAILED"){
                this.$router.push({path:'/user/cardFail'})//点击跳到平台转款金额考核失败页面
            }
        },
        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'})//点击跳到审核页面
            }
            if(this.stateRoute == "LEGAL_MANAGER_FAILED"){
                this.$router.push({path:'/user/assessFail'})//点击跳到审核未通过页面
            }
            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填写核验金额3次机会
            }
            if(this.stateRoute == "LEGAL_BANK_FAILED"){
                this.$router.push({path:'/user/qiyecardFail'})//银行卡金额失败联系客服
            }
            if(this.stateRoute == "LEGAL_BANK_SUCCESS"){
                this.$router.push({path:'/user/qiyesuccess'})//实名OK
            }
            if(this.stateRoute == "LEGAL_FROZEN"){
                this.$router.push({path:'/user/qiyesuccess'})//法人实名冻结
            } 
        }

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

获取不到 this.certificationStatus 这个状态值 是undefined 我在组件的data里面定义了certificationStatus也不行

打印this.$store.state 可以打印出来

Answer 1

使用getters解决了 可是异步的原因

Answer 2

dispatch 是异步的, 你在state 设置certificationStatus之前去获取了,当然是 undefined 了,

// 组件内

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

在提交之后 then 一下, 把你的逻辑判断加入到then 的回调中