关于axios用法的一下注意事项

安装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);

    })