vue.js - vuex异步提交，怎么获取返回数据

问题描述

问 题

做登录页面时，在vuex中的action异步提交后获取的数据在mutations中存储在state里面，但是总感觉不对，没有返回数据，我前端页面怎么获取数据，用mapgetter获取不到数据，是不是他不是实时更新的，而且输出的mapgetter输出的数据还在action的前面。下面是我前端部分代码：
},
computed: {

...mapGetters({
  userInfo: "users"
}),

},
methods: {

...mapActions({  //分发action
  logins: "logins"
}),

submit: function () {
  var $alert = $(".alert");
  if (this.username === '') {
    $alert.addClass("alert-danger");
    $alert.html("用户名不能为空");
    this.showInfo = false;
  } else if (this.password === '') {
    $alert.addClass("alert-danger");
    $alert.html("密码不能为空");
    this.showInfo = false;
  } else {
    var users = [{ "username": this.username }, { "password": this.password }];
    this.logins(users)
    console.log(this.userInfo)
  }
}

}

解决方案

经过差不多一下午，我终于知道怎么解决了。首先我要感叹一下，怎么辣么难，我看到网上的资料，看的头昏脑胀，感觉还是看的似懂非懂，刚学这个更加痛苦，想哭。
获取不到数据的原因是异步原因，在logins未执行完全的时候就执行了console.log(this.userInfo)，因为是执行顺序的问题，我就网上查了，嗯promise，正好我也使用了promise，但是我用then也不会执行完logins后再执行console.log，嗯，网上找资料，我只知道大概一个可能原因，api中我return了promise，好像是这个原因，但是我完全看不懂他们写的，好晦涩呀，我是刚学的，看的好艰难，想哭。后来怎么改都改不好，有找资料，终于黄天不负苦心人，让我找到了，在一个网页的问答下看到了希望

原来vue里面有一个watch可以监听值的变化，具体方法如下：

watch:{

userInfo:function(val){
  console.log(this.userInfo) //这里写你要进行的操作
}

},
computed: {

...mapGetters({
  userInfo: "users"
}),

},

这篇关于vue.js - vuex异步提交，怎么获取返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！