在vue中如何使用axios

1.前言

在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。

关于为什么放弃推荐? -> 尤大原话

最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，

vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用，

但以后不再把 vue-resource 作为官方的 ajax 方案。这里可以去掉 vue-resource，文档也不必翻译了。

2.安装axios

 npm install axios --save

3.引入

安装其他插件的时候，可以直接在main.js中引入并使用 Vue.use()来注册，但是 axios并不是vue插件，所以不能 使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。

为了解决这个问题，我们在引入 axios 之后，通过修改原型链，来更方便的使用。

import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios

4.使用

在 main.js 中引入之后，就能直接在组件的 methods 中使用axios了

methods: {
  postData () {
    this.$axios({
      method: 'post',
      url: '/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}

(完)