vue.js - 请教：vue-cli 数据获取异步问题，该怎么解决啊？

问题描述

问 题

新手用vue-cli，请教数据获取思路！
需求：需要获取一个全局的userdata的对象，在以后每个子vue里都需要用到。

1、App.vue里的mounted里异步请求了数据
2、通过<router-view :sub_userdata="userdata"></router-view>传递到list.vue。

app.vue:


        data () {
                return {
                    userdata:[]
                }
            },
        mounted: function () {
                    this.$nextTick(function () {
                        var that=this;
                        this.$http.get("ajax.php").then(function(response){
                            that.userdata=response.data
                        })
                    })
                }
                

3、list.vue里通过props设置sub_userdata接受app.vue里传递过来的数据
4、在computed里通过获取到的sub_userdata,再ajax取list信息。

list.vue:
export default {
  components: {
    Group,
    Cell
  },
  props:['sub_userdata'],

  data :function () {
    return {
      list:[]
    }
  },
  computed:{
      my_list: function () {
          if (this.sub_userdata>0){
              this.load_list();
              return ;
          }
      }
  },
  methods:{
    load_list:function(){
      var that=this;
      this.$http.get("ajax.php?userdata="+this.sub_userdata,{}).then(function(response){
          that.list= response.data;
      })
    }
  }
} 

我感觉这个流程好混乱，有很多问题，我想应该有更好的方法吧。
问题：
1、初次获取userdata的时候因为是异步，所以list.vue里的computed会执行2次，第一次是空，第二次是取到数据后执行的，所以没有办法这里加了一个判断if (this.sub_userdata>0)
2、computed里设置了一个属性my_list，实际上没有用，我在获取list列表的时候，直接赋值给了list属性，也感觉很奇怪。而且在template里一定要加上my_list属性，<div>{{my_list}}</div>才能真正获取到list数据。

初学者，请大家帮帮忙吧！

解决方案

没那么复杂，实现方式有很多种

1. 如果只是子组件用到，即父对子通信，有三种方式：

   • props 就是你所用的，但是检测变化可以用watch，个人觉得computed不好用，不易更改，如果要改变，增加set方法，还需要一个中间变量

   • bus.$emit('list') 事件触发，子组件用bus.$on('list'),bus的具体用法参考官方文档

   • ref,用法参考官方，直接在父组件改变子组件的值

2. 全局用到

   • vuex

   • vue.prototype

补充

我还是不太明白你的需求，我现在的理解就是获取到这个userData的后页面就跳转，或者发起其他异步请求。可以在app.vue发起请求，然后将数据传到子组件

// app.vue
data() {
    return {
        userData: null
    }
}
created() {
    this.$http.get('ajax.php')
    .then(res => {
        this.userData = res.data
        // 其实你可以直接在这里this.getData
    })
},
watch: {
    userData(v) { if (v) { this.getData(v) }}
}
methods: {
    getData(userData) {
        this.$http.get(`ajax.php?userdata=${userData}`,{}).then(res => {        
          // todo 这里你可以把数据通过props传给子组件
      })
    }
}

这篇关于vue.js - 请教：vue-cli 数据获取异步问题，该怎么解决啊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！