Vue基於vuex和axios實作載入效果以及axios的安裝配置

這篇文章帶給大家的內容是關於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設定axios的方法步驟範例

基於Vue、Vuex、Vue-router實作動畫切換功能

以上是Vue基於vuex和axios實作載入效果以及axios的安裝配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！