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.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. 先看一下结构

　　

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还需做什么监听，那就是大家为自己项目定制的东西了。

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