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

需求来源:当使用React时,使用 umi loading 很方便,页面对http请求发生改变时,也会自动改变loading的相关状态(true/false)

对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 });

第四步,Http封装

 1 import axios from ‘axios‘;
 2 import store from ‘../../store‘
 3
 4
 5 /**
 6  * 设置请求前缀(末尾必须包含 / 否则会导致动态loading失败)
 7  */
 8 axios.defaults.baseURL = "http://www.huic.top/";
 9
10 /**
11  * 定义一个请求拦截器(Loading设置true)
12  */
13 axios.interceptors.request.use(function (config) {
14     store.commit("loading", config.url);
15     return config
16 });
17 /**
18  * 定义一个响应拦截器(Loading设置为false)
19  */
20 axios.interceptors.response.use(function (response) {
21     store.commit("unloading", response.config.url.replace(axios.defaults.baseURL, ""));
22     return response
23 });

这里的封装只封装了拦截器,并未对具体请求进行封装,因为请求封装在这里可有可无,如需要的请联系邮箱:[email protected]

第五步,使用

 1 <script>
 2     import ‘./index.less‘;
 3     import * as Service from ‘@/service/api‘;
 4
 5     export default {
 6         data: () => ({
 7             // 题目标签
 8             tags: [],
 9         }),
10         computed: {
11             tagLoading() {
12                 return this.$store.state.loading[Service.URLS.ARTICLE_TAG_LEVEL];
13             },
14             testLoading() {
15                 return this.$store.state.loading[Service.URLS.ARTICLE_TEST];
16             }
17         },
18         created() {
19             this.queryTags();
20         },
21         components: {
22         },
23         methods: {
24             /**
25              * 查询标签列表(请求封装查询,也可直接使用 axios.post 等内容)
26              */
27             queryTags() {
28                 Service.articleTagLevel({}).then(res => {
29                     if (res.isOk()) {
30                         this.tags = res.data.records;
31                     }
32                 });
33             }
34         }
35     };
36 </script>

以上代码为VUE简单使用,则将loading - url - 组件进行绑定,则代表在本页面进行请求,例如:articleTagLevel,则会自动绑定loading(见12行)

以上核心代码为10-17行,代表将url和loading属性绑定,使用方法见下:

 1 <div class="test-body-item">
 2     <Row>
 3         <Col span="2" class="test-body-item-title">
 4             标签选择
 5         </Col>
 6         <Col span="21" offset="1">
 7             <TagGroup :data="tags" :loading="tagLoading"/>
 8         </Col>
 9     </Row>
10 </div>

使用方法:第 7 行,其中 :loading="tagLoading" 则代表将tagLoading属性绑定到loading参数中

至此,实现成功.

End.

原文地址:https://www.cnblogs.com/adversary/p/11229042.html

时间: 2024-10-09 22:47:07

VUE动态(自动)Loading【绑定到URL】,同页面多个Loading互不冲突的相关文章

Vue动态添加v-model绑定及获取其返回数据

从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { return { timeTip:[] } } 2.将获取到的数据进行动态生成,并塞入 timeTip 中 creadeTimeTip(data.data) //返回的数据 creadeTimeTip(data){ this.timeTip = []; //对空数组进行清空,以免影响后续操作 var len

Vue动态加载异步组件

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好

剖析Vue原理&amp;实现双向绑定MVVM

剖析Vue原理&实现双向绑定MVVM vue.js 双向绑定 javascript 邓木琴居然被盗用了 2016年08月16日发布 推荐 24 推荐 收藏 195 收藏,10.6k 浏览 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完

vue实现ajax滚动下拉加载,同时具有loading效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.

Vue动态组件

前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></compon

Vue 框架-05-动态绑定 css 样式

Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释

Atitit.面向接口的web&#160;原理与设计重写&#160;路由启动绑定配置url&#160;router&#160;rewriting&#160;urlpage&#160;&#160;mvc&#160;mvp的&#160;java&#160;c#.net&#160;php&#160;js

Atitit.面向接口的web 原理与设计重写 路由启动绑定配置url router rewriting urlpage  mvc mvp的 java c#.net php js 原理 通过vm带入启动参数    制定ioc配置文件 绑定各项.. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <ifra

在PL/SQL中使用游标、动态sql和绑定变量的小例子

需求:查询并输出30号部门的雇员信息 方式一:使用 loop...fetch 1 SET serveroutput ON; 2 DECLARE 3 CURSOR c_emp IS 4 SELECT * FROM emp WHERE deptno = 30; 5 v_emp emp%rowtype; 6 BEGIN 7 OPEN c_emp; 8 loop 9 fetch c_emp INTO v_emp; 10 exit WHEN c_emp%notfound; 11 dbms_output.p

JavaScript实现http地址自动检测并添加URL链接

一.天生我材必有用 给http字符自动添加URL链接是比较常见的一项功能.举两个我最近常用到的自动检测http://地址并添加链接的例子吧,首先是QQ邮箱,在使用QQ邮箱时,如果输入了URL地址(http://或是https://开头),则QQ邮箱会自动给这个地址添加可打开的链接.如下图所示: 还有就是微博客产品,例如twitter(zxx://翻墙可以follow苍井空姐姐哦~~ ^_^),或是国产的新浪微博.当您的微博信息中有类似于http://www.zhangxinxu.com/的URL