VUE动态(自动)Loading【绑定到URL】，同页面多个Loading互不冲突

对VUE插件进行找寻，发现没找到合适内容，就参考思路自行设计了一套

功能实现

界面Loading自动加载，不需要在每个请求前后进行拦截，且配置简单、实现方便，如图：

 

技术栈

vue、vuex、axios(http请求)

 

开始实现  第一步，文件目录结构介绍：

　　lib/http:　Http封装，对系统请求进行封装 　　service/api.js: 请求接口提取(统一管理请求URL，详细内容见右) 　　store.js: 全局状态 第二步，接口统一提取(service/api.js)

　　如上是提取的统一URL内容，使用时直接引入

第三步，全局状态封装(store.js)

1 import Vue from "vue"; 2 import Vuex from "vuex"; 3 import * as Service from '@/service/api'; 4 5 Vue.use(Vuex); 6 7 // 实现自动注册loading URl 8 const loading = {}; 9 Object.values(Service.URLS).forEach(value => { 10 loading[value] = false; 11 }); 12 13 export default new Vuex.Store({ 14 state: { 15 // url请求列表，自动注册 16 loading: loading 17 }, 18 mutations: { 19 loading(state, url) { 20 state.loading[url] = true; 21 }, 22 unloading(state, url) { 23 state.loading[url] = false; 24 } 25 }, 26 actions: {} 27 });