vue 全局封装loading加载教程(全局监听)


Posted in Javascript onNovember 05, 2020

前言:

为了页面美观,请求接口的时候延迟没有数据,页面感觉狠卡顿,封装loading,请求接口成功后隐藏掉(我这是用的vant 组件根据自己情况进行改变)。

第一步:

建立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引入 增加开关

vue 全局封装loading加载教程(全局监听)

vue 全局封装loading加载教程(全局监听)

代码:

<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 保存状态

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 开启热更新
 }

位置如下图展示

vue 全局封装loading加载教程(全局监听)

三,配置package.json文件

在package.json中的scripts对象添加命令,开启本地服务

"serve": "vue-cli-service serve && webpack-dev-server --open"

位置如下图展示

vue 全局封装loading加载教程(全局监听)

四,重启

最后执行npm run server然后重新进行打包,热更新失效问题解决

以上这篇vue 全局封装loading加载教程(全局监听)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 #Javascript
Array.filter中如何正确使用Async
Nov 04 #Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 #Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 #Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 #Javascript
vant中的toast层级改变操作
Nov 04 #Javascript
vant中的toast轻提示实现代码
Nov 04 #Javascript
You might like
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
给Function做的OOP扩展
2009/05/07 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
生产车间班组长岗位职责
2014/01/06 职场文书
我的求职择业计划书
2014/04/04 职场文书
调查研究项目计划书
2014/04/29 职场文书
我的小天地教学反思
2014/04/30 职场文书
求职自我推荐信
2014/06/25 职场文书
新郎答谢词
2015/01/04 职场文书
食品质检员岗位职责
2015/04/08 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android