axios全局配置3种方法:
1.结合vue-axios使用
2.axios改写为Vue的原型属性
3.结合Vuex的action
结合vue-axios使用:
- 首先要安装项目所需要的依赖:axios和vue-axios
- npm install axios --save-dev 或者 cnpm install axios --save-dev
- npm install vue-axios --save-dev 或者 cnpm install vue-axios --save-dev
第1种方法:首先在入口文件main.js中引入
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios)
然后就可以使用了,在你需要请求接口的地方使用
this.axios.get('api/getDataList').then((res)=>{
this.dataList=res.data.data;
}).catch((err)=>{
console.log(err);
})
第2种方法:axios改写为Vue的原型属性
首先在入口文件main.js中引入,然后挂在Vue的原型上
import axios from 'axios'
Vue.prototype.axios = axios
在你需要请求接口的地方使用
this.axios.get('api/getDataList').then((res)=>{
this.dataList=res.data.data;
}).catch((err)=>{
console.log(err);
})
第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: 'kimi'
}
},
actions: {
// 封装一个 ajax 方法
login (context) {
axios({
method: 'post',
url: '/register',
data: context.state.user
})
}
}
})
export default store
在组件中发送请求的时候，需要使用 this.$store.dispatch
methods: {
submitForm () {
this.$store.dispatch('register')
}
}
不过个人还是喜欢第二种方法,很方便~~
