這篇文章帶給大家的內容是關於Vue基於vuex和axios攔截器實現loading效果及axios的安裝配置，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
準備
#利用vue-cli腳手架建立專案
進入專案安裝vuex、axios（npm install vuex,npm install axios）
axios設定
在專案中安裝axios模組（npm install axios）完成後，進行以下設定：
main.js
//引入axios import Axios from 'axios' //修改原型链，全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求 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寫成一個元件loading.vue
Vuex state狀態設定控制loading的顯隱
store.js(Vuex)
export const store = new Vuex.Store({
state:{
isShow:false
}
})在state中定義isShow屬性，預設false隱藏
v-if="this.$store.state.isShow"
為loading元件新增v-if綁定state中的isShow
元件使用axios請求數據
<button>请求数据</button>
methods:{
getData(){
this.$axios.get('https://www.apiopen.top/journalismApi')
.then(res=>{
console.log(res)//返回请求的结果
})
.catch(err=>{
console.log(err)
})
}
}我這裡使用一個按鈕進行觸發事件，利用get請求網路上隨便找的一個api介面,.then中返回請求的整個結果（不僅僅包括資料）
Axios攔截器設定
main.js
//定义一个请求拦截器
Axios.interceptors.request.use(function(config){
store.state.isShow=true; //在请求发出之前进行一些操作
return config
})
//定义一个响应拦截器
Axios.interceptors.response.use(function(config){
store.state.isShow=false;//在这里对返回的数据进行处理
return config
})分別定義一個請求攔截器（請求開始時執行某些操作）、回應攔截器（接受到資料後執行某些操作），之間分別設定攔截時執行的操作，改變state內isShow的布林值從而控制loading元件在觸發請求資料開始時顯示loading ，當回資料時隱藏loading
特別注意：這裡有一個語法坑（我可是來來回回踩了不少次）main.js中調取、操作vuex state中的資料不同於元件中的this.$store.state，而是直接store.state 同上面程式碼
效果顯示
相關推薦：
以上是Vue基於vuex和axios實作載入效果以及axios的安裝配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
