vue2.0学习之axios的封装与vuex介绍
一、前言博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助。这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋。如果想看基础指令,可以看我之前的一篇博客,请点击 , 不过我还是建议看文档比较好。os: Vue文档是非常详细的 二、准备做vue单页应用都需要会什么? 1. vue的脚手架,直接帮你建好项目。再看看自己想要啥,补充啥! os: Git 上有很多成品项目,可以找一个好点的拉下来 注:路由按需加载、热加载 等这些都是基础功能,在这不多说。os: 慕课网有Vue的课程,网上有资源,挺不错的 2. 引入并会使用 vuex。对共享变量进行统一管理,解决多层组件传数据的问题。这个咱后面详说。 3. 封装 axios,对请求进行统一的管理,并减少代码量。 三、关于vuex出现背景: 了解过vue1.0的人应该都知道,vue的父子组件通信是很烦的,一层还好。如果有个3、4层,那父子组件通信,就头疼了。以前,这是需要开发者捋清逻辑,在合适的地方修改并传递的。但是vue2.0为了解决这个问题,提出了vuex,状态统一管理。 作用:vuex 将所有需要共享的变量放在一起,像一个仓库一般,你想对仓库中的变量 读取、修改 ,直接调 指定方法就可以,超级方便。 结构:vuex的结构大致为: state: 存放所有变量 mutations 存放同步读取、修改state的的方法 action 存放异步读取、修改state的的方法 .......还有很多其他的 os: 这篇博客只是帮大家了解如何用Vue做单页应用。 注:1. 不是所有变量都要放到 state 中,vuex 创立的初衷是方便我们对变量的管理,然而对组件的一些私有变量,不需要和别的组件共享。所以,state里面只放全局变量、多组件共享变量。 2. 解释一下 action ,所谓异步,就是在 action 文件中写方法,调 axios,然后再 调 mutations 同步修改state。很多人不理解,其实,这就是一个概念性的问题。action并没有从根本上解决异步修改state的竞争问题,但是我们需要理解、并将 异步这个操作 摘出来放在一起。 os: js脚本 本来就是同步的东西,一根筋,同一时间无法处理2件事,不存在多线程处理事务。不过,科技发展的这么牛逼,大家懂得。这个异步、竞争的思想还是要提出来的,指不定哪天就被大家研究出了解决方案。 四、关于vuex的具体使用先看一下项目的部分目录结构 1. state.jsexport default state
state 文件里面存放一个state对象,具体的元素就是我们的变量了,需要什么数据,和组件的data函数中一样写法。这里只是起到存储作用 2. mutations.jsconst mutations = {
// 显示弹窗 types.SET_ALERT_FLAG { state.alertFlag = data },// 设置弹窗内容 types.SET_ALERT_DETAIL { Object.assign(state.alertData,data) },types.ON_HTTP_ERROR { state.httpError = payload },// 设置提示弹层 types.SET_TIP_INFOR { state.tip = data } } export default mutations mutations 同步修改 state的值,仅仅是提供一个方法,接收参数,修改state值的文件。就是一个存储修改state方法的仓库。 一般我们在开发的时候请求比较多,我们会新建一个 mutation-types.js 文件,将所有函数用常量保存。其实也没什么特殊意义,仅仅是将方法统一保存,查找、维护比较方便而已。 3. actionexport const getData = function ({commit,state},{list,index}) {
commit(types.SET_TIP_INFOR,{tipFlag: false,tipMsg: ''}) } export const actionTest = function ({commit,data) { action 异步修改 state 的值。说白了,action也是一个存放修改state方法的仓库,但是 这些方法都是要调axios请求的(所以叫异步),请求完事了,再调 mutations 去同步修改state的值。所谓的异步都是我们自己写的。当然你不这么写也行,只是设计者的初衷是想让让开发者清楚异步修改的概念,虽然暂时没有解决根本问题。 这里涉及到axios请求,这个下边解释,暂时先清楚 action的概念。 4. vuex和组件通信上述介绍了 vuex的几个部分的作用,那现在就是如何在组件中去使用 vuex 首先,在main.js中,你需要将store对象引入到整个应用中 h(App)
})
然后在组件中使用 // 异步的 dispatch
this.$store.dispatch('actionTest').then(() => {}) 简单介绍一下: 注:vue中的这个 this 注意他的指向,建议不确定时,先将this赋给变量保存起来,有时经常会和window对象混淆。 以上就是vuex最基础的用法,也是最常用的方法。其他的像 getters 、如何组件中引入vuex等等,这里就不细说了,大家可以根据自身需求自行看文档补充。 五、 封装axios在一个完整的项目中,我们的和服务端的交互会很频繁,一个项目会有很多请求,冗余代码很多。所以将请求封装,统一管理还是很有必要的。我们现在做一个简单的封装。 1. 先看一下结构 2. 看一下具体代码 axios.js 文件 // 创建axios实例 application/x-www-data-urlencoded application/json
const service = axios.create({ baseURL: 'http://www.niepengfei.cn/PHPFile/ybtDemo/',timeout: 15000,headers: {'Content-Type': 'application/json'} }) service.interceptors.response.use( export default service index.js 文件 这里我们仅仅做了post 请求的封装。先对axios做上默认请求的数据,封装成函数,有传参就合并修改参数数据,请求结束之后,根据response、error,分成成功和失败两个函数,并将整个promise对象返回。对于请求的拦截这里没做。而且对网络请求的错误码也是大家根据项目具体提示的。我这里也不做详细的说明了 3. 组件中使用 {
console.log(response.data)
if (response.data.code === '0000') {
...
}
})
将封装的axios引入组件,然后直接调用即可 六、总结以上就是 vuex+axios封装的实例,时间原因,这里进提供思路和简单的实现方法,至于具体项目具体分析,axios要怎么封装,vuex还需做什么监听,那就是大家为自己项目定制的东西了。 好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |