首先，我們要通過(guò) npm/Yarn 或一個(gè) CDN 鏈接安裝 axios。
axios單文件使用例子：請(qǐng)求發(fā)送到 https://api.coindesk.com/v1/bpi/currentprice.json碉熄。我們首先創(chuàng)建一個(gè) data 里的屬性以最終放置信息桨武，然后將會(huì)在 mounted 生命周期鉤子中獲取數(shù)據(jù)并賦值過(guò)去：
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
<div id="app">
{{ info }}
</div>
如果要多個(gè)文件使用axios發(fā)ajax請(qǐng)求，簡(jiǎn)單點(diǎn)就是每個(gè)文件引用一次锈津，import axios from 'axios'呀酸，但是太麻煩了。
所以介紹方便全局使用的解決方法：
1.結(jié)合 vue-axios使用
- axios 改寫(xiě)為 Vue 的原型屬性
3.結(jié)合 Vuex的action
1.結(jié)合 vue-axios使用
vue-axios是按照vue插件的方式寫(xiě)的琼梆。結(jié)合vue-axios性誉，可以去使用vue.use方法。
在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
之后就可以全局使用this.axios了叮叹，在組件文件中的methods里去使用了艾栋，下面三種寫(xiě)法都可以
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})
2.axios 改寫(xiě)為 Vue 的原型屬性
首先在主入口文件main.js中引用，之后掛在vue的原型鏈上
import axios from 'axios'
Vue.prototype.$http= axios
在組件中使用
this.$http.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
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: 'Tom'
}
},
actions: {
// 封裝一個(gè) ajax 方法
login (context) {
axios({
method: 'post',
url: '/login',
data: context.state.user
})
}
}
})
export default store
在組件中發(fā)送請(qǐng)求的時(shí)候蝗砾，需要使用 this.$store.dispatch
methods: {
submitForm () {
this.$store.dispatch('login')
}
}
