成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置

leon / 608人閱讀

摘要：準(zhǔn)備利用腳手架創(chuàng)建項(xiàng)目進(jìn)入項(xiàng)目安裝配置項(xiàng)目中安裝模塊完成后，進(jìn)行以下配置引入修改原型鏈，全局使用這樣之后可在每個(gè)組件的中調(diào)用命令完成數(shù)據(jù)請(qǐng)求組件我這里就選擇使用提供的組件，安裝引入后，將寫成一個(gè)組件狀態(tài)設(shè)置控制的顯隱在中定義屬性，默認(rèn)隱藏

準(zhǔn)備

利用vue-cli腳手架創(chuàng)建項(xiàng)目

進(jìn)入項(xiàng)目安裝vuex、axios（npm install vuex,npm install axios）

axios配置

項(xiàng)目中安裝axios模塊（npm install axios）完成后，進(jìn)行以下配置：

main.js

//引入axios
import Axios from "axios"

//修改原型鏈，全局使用axios,這樣之后可在每個(gè)組件的methods中調(diào)用$axios命令完成數(shù)據(jù)請(qǐng)求
Vue.prototype.$axios=Axios
loading組件

我這里就選擇使用iview提供的loading組件，

npm install iview

main.js
import iView from "iview";
import "iview/dist/styles/iview.css";
Vue.use(iView);

安裝引入后，將loading寫成一個(gè)組件loading.vue

Vuex state狀態(tài)設(shè)置控制loading的顯隱

store.js(Vuex)

export const store = new Vuex.Store({
    state:{
        isShow:false
    }
})

在state中定義isShow屬性，默認(rèn)false隱藏

v-if="this.$store.state.isShow"

為loading組件添加v-if綁定state中的isShow

組件使用axios請(qǐng)求數(shù)據(jù) 
methods:{
        getData(){
            this.$axios.get("https://www.apiopen.top/journalismApi")
            .then(res=>{
                console.log(res)//返回請(qǐng)求的結(jié)果
            })
            .catch(err=>{
                console.log(err)
            })
        }
    }

我這里使用一個(gè)按鈕進(jìn)行觸發(fā)事件，利用get請(qǐng)求網(wǎng)上隨便找的一個(gè)api接口,.then中返回請(qǐng)求的整個(gè)結(jié)果（不僅僅包括數(shù)據(jù)）

Axios攔截器配置

main.js

//定義一個(gè)請(qǐng)求攔截器
Axios.interceptors.request.use(function(config){
  store.state.isShow=true; //在請(qǐng)求發(fā)出之前進(jìn)行一些操作
  return config
})
//定義一個(gè)響應(yīng)攔截器
Axios.interceptors.response.use(function(config){
  store.state.isShow=false;//在這里對(duì)返回的數(shù)據(jù)進(jìn)行處理
  return config
})

分別定義一個(gè)請(qǐng)求攔截器（請(qǐng)求開始時(shí)執(zhí)行某些操作）、響應(yīng)攔截器（接受到數(shù)據(jù)后執(zhí)行某些操作），之間分別設(shè)置攔截時(shí)執(zhí)行的操作，改變state內(nèi)isShow的布爾值從而控制loading組件在觸發(fā)請(qǐng)求數(shù)據(jù)開始時(shí)顯示loading，返回?cái)?shù)據(jù)時(shí)隱藏loading
特別注意：這里有一個(gè)語法坑（我可是來來回回踩了不少次）main.js中調(diào)取、操作vuex state中的數(shù)據(jù)不同于組件中的this.$store.state，而是直接store.state 同上面代碼

效果展示 

本文作者：茅野zhy
博客鏈接：www.zhysama.xyz
版權(quán)聲明： 該文章由博主編輯 , 轉(zhuǎn)發(fā)請(qǐng)注明出處謝謝！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108473.html

相關(guān)文章

  • Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置

    摘要：準(zhǔn)備利用腳手架創(chuàng)建項(xiàng)目進(jìn)入項(xiàng)目安裝配置項(xiàng)目中安裝模塊完成后，進(jìn)行以下配置引入修改原型鏈，全局使用這樣之后可在每個(gè)組件的中調(diào)用命令完成數(shù)據(jù)請(qǐng)求組件我這里就選擇使用提供的組件，安裝引入后，將寫成一個(gè)組件狀態(tài)設(shè)置控制的顯隱在中定義屬性，默認(rèn)隱藏 準(zhǔn)備 利用vue-cli腳手架創(chuàng)建項(xiàng)目 進(jìn)入項(xiàng)目安裝vuex、axios（npm install vuex,npm install axios） ...

    Shimmer 評(píng)論0 收藏0

  • 從0到1使用VUE-CLI3開發(fā)實(shí)戰(zhàn)(五):模塊化VUEX及使用vuetify

    摘要：小肆前幾天發(fā)了一篇年精品開源項(xiàng)目庫(kù)的匯總，今天小肆要使用的是在組件中排行第三的。記得點(diǎn)好看呦前置閱讀用從到做一個(gè)完整功能手機(jī)站一從到開發(fā)實(shí)戰(zhàn)手機(jī)站二提交規(guī)范配置從到使用開發(fā)實(shí)戰(zhàn)三知識(shí)儲(chǔ)備從到使用開發(fā)實(shí)戰(zhàn)四封裝 小肆前幾天發(fā)了一篇2019年Vue精品開源項(xiàng)目庫(kù)的匯總，今天小肆要使用的是在UI組件中排行第三的Vuetify。 vuetify介紹 Vuetify是一個(gè)漸進(jìn)式的框架，完全根據(jù)M...

    fuyi501 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    Tecode 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    APICloud 評(píng)論0 收藏0

  • 基于vue項(xiàng)目的知識(shí)總結(jié)

    摘要：前言用有一段時(shí)間了，從用搭建項(xiàng)目一步步配置，到之后的研究動(dòng)效這些，一直想寫些東西記錄一下做個(gè)總結(jié)，剛好趁著有空就整理一下。結(jié)語有新的知識(shí)點(diǎn)會(huì)更新到知識(shí)體系中，總結(jié)和心得體會(huì)會(huì)單獨(dú)寫文章詳述，努力填坑 前言 用vue有一段時(shí)間了，從用vue-cli搭建項(xiàng)目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動(dòng)效這些，一直想寫些東西記錄一下、做個(gè)總結(jié)，剛好趁著...

    tianlai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<