vue2.0学习之axios的封装与vuex介绍


Posted in Javascript onMay 28, 2018

一、前言

博主也是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的具体使用

先看一下项目的部分目录结构

vue2.0学习之axios的封装与vuex介绍                

1. state.js

const state = {
 topList: {},
 msgg: '1231321312',
 alertFlag: {state: false, type: ''},
 errorStatus: '',
 alertData: {title: '警告', content: '这是敏感信息,一旦删除,不可再恢复,确认删除吗', operateOk: '确定', operateCan: '取消', time: ''},
 httpError: {
 hasError: false,
 status: '',
 statusText: ''
 },
 tip: {
 tipFlag: false,
 tipMsg: ''
 }
}

export default state

state  文件里面存放一个state对象,具体的元素就是我们的变量了,需要什么数据,和组件的data函数中一样写法。这里只是起到存储作用

2.  mutations.js

import * as types from './mutation-types'

const mutations = {
 // 显示弹窗
 [types.SET_ALERT_FLAG](state, data) {
 state.alertFlag = data
 },
 // 设置弹窗内容
 [types.SET_ALERT_DETAIL](state, data) {
 Object.assign(state.alertData, data)
 },
 [types.ON_HTTP_ERROR](state, payload) {
 state.httpError = payload
 },
 // 设置提示弹层
 [types.SET_TIP_INFOR](state, data) {
 state.tip = data
 }
}

export default mutations

mutations 同步修改 state的值,仅仅是提供一个方法,接收参数,修改state值的文件。就是一个存储修改state方法的仓库。

一般我们在开发的时候请求比较多,我们会新建一个  mutation-types.js  文件,将所有函数用常量保存。其实也没什么特殊意义,仅仅是将方法统一保存,查找、维护比较方便而已。

3. action

import * as types from './mutation-types'
import { getTest } from '../server/index.js'

export const getData = function ({commit, state}, {list, index}) {
 commit(types.SET_TIP_INFOR, {tipFlag: false, tipMsg: ''})
}

export const actionTest = function ({commit, state}, data) {
 getTest({
 url: 'getPhoneCode.php',
 data: JSON.stringify({
 'phone': '18862533985'
 })
 })
 .then(response => {
 console.log(response.data)
 commit(types.SET_ALERT_DETAIL, {title: '提示', content: '您确定要还款吗?'})
 commit(types.SET_ALERT_FLAG, {state: true, type: ''})
 })
}

action  异步修改  state  的值。说白了,action也是一个存放修改state方法的仓库,但是 这些方法都是要调axios请求的(所以叫异步),请求完事了,再调 mutations 去同步修改state的值。所谓的异步都是我们自己写的。当然你不这么写也行,只是设计者的初衷是想让让开发者清楚异步修改的概念,虽然暂时没有解决根本问题。

这里涉及到axios请求,这个下边解释,暂时先清楚 action的概念。

4. vuex和组件通信

上述介绍了 vuex的几个部分的作用,那现在就是如何在组件中去使用 vuex

首先,在main.js中,你需要将store对象引入到整个应用中

new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
})

然后在组件中使用

// 直接使用
 <alert v-if="this.$store.state.alertFlag.state"></alert>
// 同步的 commit
 this.$store.commit('SET_ALERT_DETAIL', {title: '提示', content: '您确定要还款吗?'}

// 异步的 dispatch
 this.$store.dispatch('actionTest').then(() => {})

简单介绍一下:

this.$store.state.  我们通过$store对象 ,直接使用state中的属性

this.$store.commit('', {})   通过 commit 方法调  mutations-types 中的方法(其实就是mutations的方法),这步是同步的,而且数据会自动监听变化就行渲染

this.$store.dispatch('actionTest').then(() => {})  通过 dispatch 的方法调 action 的方法,异步修改 state

注:vue中的这个  this 注意他的指向,建议不确定时,先将this赋给变量保存起来,有时经常会和window对象混淆。

以上就是vuex最基础的用法,也是最常用的方法。其他的像 getters 、如何组件中引入vuex等等,这里就不细说了,大家可以根据自身需求自行看文档补充。

 五、 封装axios

在一个完整的项目中,我们的和服务端的交互会很频繁,一个项目会有很多请求,冗余代码很多。所以将请求封装,统一管理还是很有必要的。我们现在做一个简单的封装。

1. 先看一下结构

vue2.0学习之axios的封装与vuex介绍

2. 看一下具体代码

axios.js 文件

import axios from 'axios'

// 创建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(
 function(response) {
 // 请求正常则返回,这里返回了所有的请求头和请求体信息
 return Promise.resolve(response)
 },
 function(error) {
 // 请求错误则向store commit这个状态变化
 const httpError = {
 alertFlag: true,
 errorStatus: error.response.status,
 msgg: error.response.statusText
 }
 this.$store.commit('SET_ALERT_FLAG', {state: false, type: 'ok'})
 console.log(httpError)
 return Promise.reject(error)
 }
)

export default service

index.js 文件

import request from './axios.js'
export function getTest(axiosData) {
 var data = {
 url: '',
 method: 'post',
 data: ''
 }
// 合成请求对象
 Object.assign(data, axiosData)
 return request(data)
}

这里我们仅仅做了post 请求的封装。先对axios做上默认请求的数据,封装成函数,有传参就合并修改参数数据,请求结束之后,根据response、error,分成成功和失败两个函数,并将整个promise对象返回。对于请求的拦截这里没做。而且对网络请求的错误码也是大家根据项目具体提示的。我这里也不做详细的说明了

3. 组件中使用

import { getTest } from '../../server/index.js'
getTest({
 url: 'login.php',
 data: JSON.stringify({
 'phone': thiss.phone,
 'phoneCode': thiss.phoneCode
 })
 })
 .then(response => {
 console.log(response.data)
 if (response.data.code === '0000') {
 ...
 }
 })

将封装的axios引入组件,然后直接调用即可

六、总结

以上就是 vuex+axios封装的实例,时间原因,这里进提供思路和简单的实现方法,至于具体项目具体分析,axios要怎么封装,vuex还需做什么监听,那就是大家为自己项目定制的东西了。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 #Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
JavaScript继承定义与用法实践分析
May 28 #Javascript
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
JS数组去重常用方法实例小结【4种方法】
May 28 #Javascript
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
javascript少儿编程关于返回值的函数内容
May 27 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
群众路线专项整治方案
2014/10/27 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python