关于axios在vue-cli搭建的项目的使用。

Question

为什么在项目里的main.js里引入了在axios，在其他 .vue页面里使用提示未定义？
为什么必须在 .vue的当前页面引入axios才能够使用?

Answer 1

因为每个vue组件有独立的作用域。要全局使用可以把axios挂载到Vue的原型上。然后在组件内通过this访问。

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.axios = axios


//在组件中
this.axios(opt).then(fn)

Answer 2

查了下相关资料，发现可以通过 Object.defineProperty 来解决。

import axios from 'axios';
Object.defineProperty(Vue.prototype, '$_axios', { value: axios });

然后在.vue页面中引用

this.$_axios(opt)

Answer 3

其实你疑惑的是为什么要这么麻烦, 要么在main里面把axios放到vue的原型里用, 要么每个.vue 组件内 import.
为什么不跟以前写jquery一样, script引入就能在页面的任何一个地方用.

其实这就是一个模块化开发的理念. JS之间的互相依赖问题. 就好像你写 .vue 组件, 你必须在父组件内 import 然后注册到componets内才能用的道理是一样的.

以后别人维护你代码的时候就能一眼就能看到每个文件之间的依赖关系和路径, 不会出现出现一个BUG, 然后整个项目的找代码的情况.

有兴趣就去搜索一下模块化开发的相关知识吧.

Answer 4

因为他不是一个vue的component，所以不能在main.js注册了就能全局调用，不过有一个方法：

import axios from "axios";
Vue.prototype.$ajax = axios;

之后就可以在.vue文件通过调用

this.$ajax

来获取axios实例

Answer 5

是的，没错的

Answer 6

其实有两种方案：
方案一：
就是大家上面说的

Vue.prototype.$axios = axios

将axios模块绑定到全局的Vue原型上面。
方案二：
单独写一个utils工具类，
在这个工具类中

import axios from 'axios'
import qs from 'qs'

导入 axios模块和qs模块（为了axios 进行post请求时对参数进行格式化）
然后在这里

export funciton(){}

定义导出的方法，在组件中如果要使用的时候
直接import 进去就可以了