vue全局封装loading加载教程（全局监听）
前⾔：
为了页⾯美观，请求接⼝的时候延迟没有数据，页⾯感觉狠卡顿，封装loading，请求接⼝成功后隐藏掉（我这是⽤的vant 组件根据⾃⼰情况进⾏改变）。第⼀步：建⽴loading.vue
第⼆步：
app.vue引⼊ 增加开关
代码：
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 保存状态
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
第四步：
监听接⼝状态，全局改变isLoading状态（main.js引⼊或者⾃⼰在引⼊⼀个js）
// 请求
axios.interceptors.request.use( config => {
// 改变vuex中的isLoading状态数据，当为true，loading显⽰ store.state.isLoading = true return config; },
error => {
return Promise.error(error); });
// 响应
axios.interceptors.response.use( response => {
// 如果返回的状态码为200，说明接⼝请求成功，可以正常拿到数据 // 否则的话抛出错误
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热更新失效不可以及时更新前⾔
项⽬中遇到问题，热更新失效，不能每次及时提醒，百度了很多⽅法，效果不是狠显著，后来发现webpack4.0需要⼿动配置开启热更新，默认没有开启解决办法
⼀，安装依赖webpack-dev-server根据⾃⼰的情况安装npm / cnpm
npm install --save-dev webpack-dev-server / cnpm install --save-dev webpack-dev-server⼆，配置vue.config.js⽂件
由于vue-cli4⽂件夹和之前有很⼤的出⼊ 所以要在vue.config.js配置相关参数，增加devServer的配置
devServer: { compress: true,
disableHostCheck: true, //webpack4.0 开启热更新 }
位置如下图展⽰
三，配置package.json⽂件
在package.json中的scripts对象添加命令，开启本地服务
\"serve\": \"vue-cli-service serve && webpack-dev-server --open\"位置如下图展⽰
四，重启
最后执⾏npm run server然后重新进⾏打包，热更新失效问题解决
以上这篇vue 全局封装loading加载教程(全局监听)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
