vueJs(2.x)+router+vuex简易博客系统<六> 整合axios

上一篇文章介绍了路由的基础知识，我们已经学会了使用路由跳转链接，当碰到更加复杂的需求的时候，可以查阅下官网api,接下来，我们需要向后台发送请求了，由于vue不自带ajax请求模块，所以我们安装官方推荐的axios的模块

1、安装axios

npm install axios --save

2、打开项目的main.js，添加以下代码

//先引入模块import axios from 'axios'//这句话的意思是把axios注册到全局vue对象中去。Vue.prototype.$ajax = axios

3、在组件中进行请求数据，如下方法

submitDate(){        let that = this;        that.$ajax({          method: 'post',          url: 'http://localhost:8082/article/add',          data: {            title: that.title,            author: that.author,            keyWord:that.keyWord,            mdValue:that.msg.mdValue,            htmlValue:that.msg.htmlValue          }        }).then(response=>{          if(response.data.c=100){            var id = response.data.insertId;            that.title='';            that.keyWord='';            that.msg.mdValue='';            //跳转界面到首页            router.push({ path: `/content/${id}` }); // -> /user/123          }        }).catch(err=>{          console.log(err);        });      }

在组件中进行发送请求就已经完成了，是不是非常容易配置的。

不过平时我们进行开发的时候，会使用到vuex(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式),我们会在action中向后台发送请求的，由于这里无法使用全局vue组件实例，不过可以向下面的写法(vuex的知识可以跳过，下篇会将，只管发送axios的)

/* eslint-disable */import axios from 'axios' //引入axiosconst HOST = 'http://localhost:8082';export default {  //初始化信息  initializeData({ commit }) {    //直接发送请求即可    axios.get(HOST+'/article/list')      .then(function (response) {        commit('INITIALIZE_DATA',response.data.list);      })      .catch(function (error) {      });  }}

分为两步：
第一步：直接引入axios模块
第二步：参照api直接发送请求即可

总结：vue项目开发中两种使用方式的写法都列举出来了，还是非常简单的。下一篇我们主要讲解下vue中如何使用vuex进行状态管理工作