vuex在actions里面异步请求数据,获取到数据提交给mutations,在组件获取给data

问题描述

vuex在actions里面异步请求数据,获取到数据提交给mutations,在组件获取给data不对

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

我在actions异步请求是没有问题的,接口是你可以正常调用的
在组件获取到状态值我使用的是this.$nextTick  等加载完毕再去给data值 按理说也是可以的  但是不对

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
actions

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

mutations

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

组件

    data(){
        return {
            type : '',//认证方式
            exampleDialogPerson : false,//示范弹层
            exampleDialogLeagel: false,//示范弹层
            exampleDialog2 : false,//认证方式弹层
            exampleDialog3 : false,//认证方式弹层
            show:false,//认证提示
            flag1:false,//底部卡片
            flag2:false,
            flag3:false,
            flag4:false,
            phone: '',//进入认证需要绑定手机号
            typeMethods: '',//认证方式  个人  企业
            stateRoute: '',//状态路由
            baazar: false,//应用市场弹层
            certificationStatus1: ''
        }
    },
    components: {
        NavBar,
        PubFooter
    },
    computed: {
        certificationStatus(state) {
            return this.$store.state.certificationStatus;
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.certificationStatus1 = this.$store.state.certificationStatus;
        });
        console.log(this.certificationStatus)
        console.log(this.certificationStatus1)

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

我想获取到状态值,并操作状态值,对状态值进行判断,根据状态值来决定显示什么

阅读 6.2k
1 个回答

把 certificationStatus 放到 computed 内绑定。

computed: {
    certificationStatus() {
        return this.$store.state.certificationStatus
    }
}
watch: {
    certificationStatus(newVal) {
        if(newVal) {
            // 操作
        }
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题