vue异步axios如何实现获取数据渲染到页面-创新互联

小编给大家分享一下vue异步axios如何实现获取数据渲染到页面，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

index.vue

忽略坑人的传参方式。。。

 created(){
  this.init()
  this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001"}').then((res) => {
   this.$nextTick(()=>{
    this.$store.state.retData = res.data.retdata
   })
  })
 },

在创建时获取数据，将其存入store

加入页面只能这样写

equip.vue

   规格信息
   

    设备惯用名
    {{equipData.convent_eq}}
   
    

     设备名称
     {{equipData.eq_name}}
    
    

     规格型号
     {{equipData.modelno}}
    
   
    采购价格
    {{equipData.cost_purchase}}
   
  

可以这样写，computed 属性，当equipData发生变化时，页面会自动渲染，如果数据没有获取到，默认它为空，这样就不会报错

computed:{
   equipData:function () {
    return this.$store.state.retData.eqInfo||''
   }
  },

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

以上是“vue异步axios如何实现获取数据渲染到页面”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！