vue全局使用axios插件请求ajax

vue全局使用axios插件请求ajax

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方宣布停止更新vue-resource，并推荐大家使用axios，越来越多的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目会使用 Vuex 来管理数据。
之前一直使用的是 vue-resource插件，在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了；

Axios 是一个基于 promise 的 HTTP 库，并没有install方法，所以是不能使用vue.use()方法的。

使用 axios 访问 API — Vue.js
https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

简单点就是每个文件引用一次，import axios from 'axios';

全局使用的解决方法有很三种：
1.结合 vue-axios使用
2. axios 改写为 Vue 的原型属性
3.结合 Vuex的action

1.结合 vue-axios使用（个人感觉这种方法比较方便）
vue-axios是按照vue插件的方式写的。结合vue-axios，可以去使用vue.use方法。
在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

之后就可以全局使用this.axios了，在组件文件中的methods里去使用了

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
    },

 

2.axios 改写为 Vue 的原型属性
首先在主入口文件main.js中引用，之后挂在vue的原型链上
import axios from 'axios'
Vue.prototype.$ajax= axios
在组件中使用

this.$ajax.get('api/getNewsList')
	.then((response)=>{
        this.newsList=response.data.data;
      })
	  .catch((response)=>{
        console.log(response);
      })

　　

3.结合 Vuex的action
在vuex的仓库文件store.js中引用，使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'zack'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})

export default store

在组件中发送请求的时候，需要使用 this.$store.dispatch

methods: {
  submitForm () {
    this.$store.dispatch('login')
  }
}

 

其实 Vue 和 axios 可以在一起配合的事情不只是访问和展示一个 API。你也可以和 Serverless Function 通信，向一个有写权限的 API 发送发布/编辑/删除请求等等。由于这两个库的集成很简单直接，它便成为了需要在工作流中集成 HTTP 客户端的开发者的常见选择。