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

<ul>
   <h4 class="tit">規格信息</h4>
   <li>
    <span class="key">設備慣用名</span>
    <span class="val">{{equipData.convent_eq}}</span>
   </li>
    <li>
     <span class="key">設備名稱</span>
     <span class="val">{{equipData.eq_name}}</span>
    </li>
    <li>
     <span class="key">規格型號</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 屬性，當equipData發生變化時，頁面會自動渲染，如果數據沒有獲取到，默認它為空，這樣就不會報錯

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

Vue的優點

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

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