安装axios
命令:npm install axios
安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入
为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex,封装一个 aciton。具体的实施请往下看~
方法一:引入 axios 之后,修改原型链
在main.js里面引入axios
import axios from "axios"
这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题。
在main.js下
Vue.prototype.$ajax = axios;
在 main.js 中添加了这两行代码之后,就能直接在组件的中使用 $ajax 命令
例如:nav.vue中
created() {
this.$ajax.get('/api').then( res => {
console.log(res.data.navList);
})}
这样就获取到我想要的数据navList,这里的“/api"是指向我配置好的url,可以直接填写数据的url,因为涉及到跨域问题,所以需要在config/index.js配置好proxyTable.
以上是通过在main.js中修改原型链暴露axios的用法,使得每个组件都能使用axios请求数据而不用每个组件都引入axios;
那我想直接在main.js中请求回所有数据,然后在每个组件直接用某一块的数据,该怎么做呢?
简单说就是 加入我在main.js请求回来的所有数据是{logourl: "upfiles/201807/06/a8b04e8a92a9ee92c.png", navList: Array(8), banner: Array(3), customization: {…}},那我在组件nav.vue线稿直接用navList数据,而不用再去请求,要怎么做?
在main.js中: 修改原型链暴露返回的数据,使得其他组件可以直接访问数据
import axios from "axios"
axios({
method: 'get',
baseURL:'/api'
}).then( res => {
Vue.prototype.$store=res.data; // 这里修改原型链将请求回来的数据暴露出去
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
})
}).catch( err => {
console.log(err);
})