vue異步axios如何實現(xiàn)獲取數(shù)據(jù)渲染到頁面

小編給大家分享一下vue異步axios如何實現(xiàn)獲取數(shù)據(jù)渲染到頁面，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

在創(chuàng)建時獲取數(shù)據(jù)，將其存入store

加入頁面只能這樣寫

equip.vue

<ul>
   <h4 class="tit">規(guī)格信息</h4>
   <li>
    <span class="key">設(shè)備慣用名</span>
    <span class="val">{{equipData.convent_eq}}</span>
   </li>
    <li>
     <span class="key">設(shè)備名稱</span>
     <span class="val">{{equipData.eq_name}}</span>
    </li>
    <li>
     <span class="key">規(guī)格型號</span>
     <span class="val">{{equipData.modelno}}</span>
    </li>
   <li v-if="show">
    <span class="key">采購價格</span>
    <span class="val">{{equipData.cost_purchase}}</span>
   </li>
  </ul>

可以這樣寫，computed 屬性，當(dāng)equipData發(fā)生變化時，頁面會自動渲染，如果數(shù)據(jù)沒有獲取到，默認(rèn)它為空，這樣就不會報錯

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

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

以上是“vue異步axios如何實現(xiàn)獲取數(shù)據(jù)渲染到頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！