axios全局配置3種方法:
1.結(jié)合vue-axios使用
2.axios改寫(xiě)為Vue的原型屬性
3.結(jié)合Vuex的action
結(jié)合vue-axios使用:
- 首先要安裝項(xiàng)目所需要的依賴: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)
然后就可以使用了,在你需要請(qǐng)求接口的地方使用
this.axios.get('api/getDataList').then((res)=>{
this.dataList=res.data.data;
}).catch((err)=>{
console.log(err);
})
第2種方法:axios改寫(xiě)為Vue的原型屬性
首先在入口文件main.js中引入,然后掛在Vue的原型上
import axios from 'axios'
Vue.prototype.axios = axios
在你需要請(qǐng)求接口的地方使用
this.axios.get('api/getDataList').then((res)=>{
this.dataList=res.data.data;
}).catch((err)=>{
console.log(err);
})
第3種方法:結(jié)合 Vuex的action
在vuex的倉(cāng)庫(kù)文件store.js中引用醇坝，使用action添加方法
import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定義狀態(tài)
state: {
user: {
name: 'kimi'
}
},
actions: {
// 封裝一個(gè) ajax 方法
login (context) {
axios({
method: 'post',
url: '/register',
data: context.state.user
})
}
}
})
export default store
在組件中發(fā)送請(qǐng)求的時(shí)候挖滤，需要使用 this.$store.dispatch
methods: {
submitForm () {
this.$store.dispatch('register')
}
}
不過(guò)個(gè)人還是喜歡第二種方法,很方便~~
