摘要:准备利用脚手架创建项目进入项目安装配置项目中安装模块完成后,进行以下配置引入修改原型链,全局使用这样之后可在每个组件的中调用命令完成数据请求组件我这里就选择使用提供的组件,安装引入后,将写成一个组件状态设置控制的显隐在中定义属性,默认隐藏
准备
利用vue-cli脚手架创建项目
进入项目安装vuex、axios(npm install vuex,npm install axios)
axios配置项目中安装axios模块(npm install axios)完成后,进行以下配置:
main.js
//引入axios import Axios from "axios" //修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求 Vue.prototype.$axios=Axiosloading组件
我这里就选择使用iview提供的loading组件,
npm install iview main.js import iView from "iview"; import "iview/dist/styles/iview.css"; Vue.use(iView);
安装引入后,将loading写成一个组件loading.vue
Vuex state状态设置控制loading的显隐store.js(Vuex)
export const store = new Vuex.Store({ state:{ isShow:false } })
在state中定义isShow属性,默认false隐藏
v-if="this.$store.state.isShow"
为loading组件添加v-if绑定state中的isShow
组件使用axios请求数据methods:{ getData(){ this.$axios.get("https://www.apiopen.top/journalismApi") .then(res=>{ console.log(res)//返回请求的结果 }) .catch(err=>{ console.log(err) }) } }
我这里使用一个按钮进行触发事件,利用get请求网上随便找的一个api接口,.then中返回请求的整个结果(不仅仅包括数据)
Axios拦截器配置main.js
//定义一个请求拦截器 Axios.interceptors.request.use(function(config){ store.state.isShow=true; //在请求发出之前进行一些操作 return config }) //定义一个响应拦截器 Axios.interceptors.response.use(function(config){ store.state.isShow=false;//在这里对返回的数据进行处理 return config })
分别定义一个请求拦截器(请求开始时执行某些操作)、响应拦截器(接受到数据后执行某些操作),之间分别设置拦截时执行的操作,改变state内isShow的布尔值从而控制loading组件在触发请求数据开始时显示loading,返回数据时隐藏loading
特别注意:这里有一个语法坑(我可是来来回回踩了不少次)main.js中调取、操作vuex state中的数据不同于组件中的this.$store.state,而是直接store.state 同上面代码
本文作者:茅野zhy
博客链接:www.zhysama.xyz
版权声明: 该文章由博主编辑 , 转发请注明出处谢谢!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97403.html
摘要:准备利用脚手架创建项目进入项目安装配置项目中安装模块完成后,进行以下配置引入修改原型链,全局使用这样之后可在每个组件的中调用命令完成数据请求组件我这里就选择使用提供的组件,安装引入后,将写成一个组件状态设置控制的显隐在中定义属性,默认隐藏 准备 利用vue-cli脚手架创建项目 进入项目安装vuex、axios(npm install vuex,npm install axios) ...
摘要:小肆前几天发了一篇年精品开源项目库的汇总,今天小肆要使用的是在组件中排行第三的。记得点好看呦前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从到使用开发实战四封装 小肆前几天发了一篇2019年Vue精品开源项目库的汇总,今天小肆要使用的是在UI组件中排行第三的Vuetify。 vuetify介绍 Vuetify是一个渐进式的框架,完全根据M...
摘要:前言用有一段时间了,从用搭建项目一步步配置,到之后的研究动效这些,一直想写些东西记录一下做个总结,刚好趁着有空就整理一下。结语有新的知识点会更新到知识体系中,总结和心得体会会单独写文章详述,努力填坑 前言 用vue有一段时间了,从用vue-cli搭建项目、一步步配置axios、vuex、vue-router,到之后的研究canvas、动效这些,一直想写些东西记录一下、做个总结,刚好趁着...
阅读 1396·2021-11-22 15:24
阅读 2480·2021-10-11 11:06
阅读 2296·2021-10-09 09:45
阅读 2491·2021-09-09 09:33
阅读 595·2019-08-30 15:53
阅读 1406·2019-08-30 12:48
阅读 578·2019-08-29 13:47
阅读 465·2019-08-26 18:27