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' //引入axios
const 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进行状态管理工作