vue 全局封裝loading加載教程(全局監(jiān)聽)
前言：
為了頁面美觀，請求接口的時候延遲沒有數(shù)據(jù)，頁面感覺狠卡頓，封裝loading，請求接口成功后隱藏掉（我這是用的vant 組件根據(jù)自己情況進行改變）。
第一步：
建立loading.vue
<template>
<div class="loading">
<van-loading size="36px" vertical>加載中...</van-loading>
</div>
</template>
<script>
export default {
props: {},
data() {
return {};
},
computed: {},
created() {},
mounted() {},
};
</script>
<style scoped>
</style>
第二步：
app.vue引入 增加開關
代碼：
<loading v-show="isLoading"></loading>
import { mapState } from "vuex";
import loading from "./components/loading";
computed: {
...mapState(["isLoading"])
},
components: {
loading
},
//css
.loading {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: fixed;
padding-top: 5.333333rem;
}
第三步：
vuex 保存狀態(tài)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
isLoading: false//loading全局開關
},
mutations: {
changeisLoading(state, data) {
state.isLoading = data
}
},
})
export default store
第四步：
監(jiān)聽接口狀態(tài)，全局改變isLoading狀態(tài)（main.js引入或者自己在引入一個js）
// 請求攔截器
axios.interceptors.request.use(
config => {
// 改變vuex中的isLoading狀態(tài)數(shù)據(jù)，當為true，loading顯示
store.state.isLoading = true
return config;
},
error => {
return Promise.error(error);
}
);
// 響應攔截器
axios.interceptors.response.use(
response => {
// 如果返回的狀態(tài)碼為200，說明接口請求成功，可以正常拿到數(shù)據(jù)
// 否則的話拋出錯誤
if (response.status === 200) {
//loading隱藏
store.state.isLoading = false
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
if (error.response.status) {
return Promise.reject(error.response);
}
}
);
OK 封裝完成！
補充知識：vue-cli4 APP熱更新失效不可以及時更新
前言
項目中遇到問題，熱更新失效，不能每次及時提醒，百度了很多方法，效果不是狠顯著，后來發(fā)現(xiàn)webpack4.0需要手動配置開啟熱更新，默認沒有開啟
解決辦法
一，安裝依賴webpack-dev-server
根據(jù)自己的情況安裝npm / cnpm
npm install --save-dev webpack-dev-server / cnpm install --save-dev webpack-dev-server
二，配置vue.config.js文件
由于vue-cli4文件夾和之前有很大的出入 所以要在vue.config.js配置相關參數(shù)，增加devServer的配置
devServer: {
compress: true,
disableHostCheck: true, //webpack4.0 開啟熱更新
}
位置如下圖展示
三，配置package.json文件
在package.json中的scripts對象添加命令，開啟本地服務
"serve": "vue-cli-service serve && webpack-dev-server --open"
位置如下圖展示
四，重啟
最后執(zhí)行npm run server然后重新進行打包，熱更新失效問題解決
以上這篇vue 全局封裝loading加載教程(全局監(jiān)聽)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在Vue前端項目中,可通過axios庫發(fā)送請求至后端獲取Excel下載鏈接,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個頁面需要就在那個頁面引入、注冊、使用,本文結合示例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue3實現(xiàn)動態(tài)添加路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了關于Echarts餅圖圖例太長的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了用Cordova打包Vue項目的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本文主要探討了網頁刷新時,原本隱藏的元素會一閃而過的問題,以及嘗試過的解決方案并未奏效,通過實例代碼介紹了如何處理?Vue3?中隱藏元素刷新閃爍問題,感興趣的朋友跟隨小編一起看看吧2024-10-10
這篇文章主要介紹了vue中使用iview自定義驗證關鍵詞輸入框問題及解決方法，本文通過實例結合代碼的形式給大家介紹解決方法,需要的朋友可以參考下2018-03-03
vue3使用defineModel實現(xiàn)父子組件雙向綁定
這篇文章主要個給大家介紹了在vue3中使用defineModel進行父子組件中的雙向綁定,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-01-01
作為使用Vue的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、v-for、v-if等，同時Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時間開心的摸魚2022-11-11
模式是 Vue CLI 項目中一個重要的概念，下面這篇文章主要給大家介紹了關于Vue CLI中模式與環(huán)境變量的相關資料，需要的朋友可以參考下2021-05-05