Vue原型 Axios

Question

我是一名新手，正在学习Vue和Quasar。

现在，我对Vue的工作原理有了模糊的了解。

我试图理解当我们初始化Quasar时获得的样板代码。

在初始化时，我要求从cli集成axios和veux。

现在，我正在尝试理解样板代码，结果发现了位于插件文件夹中的axios.js文件。

该文件包含以下代码：

import axios from 'axios'

export default ({ Vue }) => {
  Vue.prototype.$axios = axios
}

1. 请问这段代码是做什么用的？根据我的理解，它似乎给 vue 添加了一个名为 axios 的方法，以便我们可以全局使用它？

2. 为什么要使用 $axios？例如 Vue.prototype.$axios = axios，我们不能只写 Vue.prototype.axios = axios 吗？因为最终它只是创建了一个属性。

3. 如果我们可以全局使用 axios（而不需要导入它，换句话说，不需要写 import axios from "axios"），那么该怎么做呢？

4. 我猜这只能在 .vue 文件中起作用？

5. 我通常会创建一个帮助函数，在其中进行所有网络请求，通常帮助函数文件名为 networkRequest.js，我会导入 axios 并发出请求。由于 Vue.prototype.$axios = axios 只能在 .vue 文件中起作用，所以是否仍然有意义使用来自样板中的 axios 插件？

- anny123

---

我猜你的大部分问题都可以在这里找到答案：添加实例属性。 - Mark

这解决了我的疑虑。谢谢 :) - Alwaysblue

对我来说，在引导文件中无法访问app.prototype，因此要在引导文件中添加我的方法，我必须执行以下操作：app.config.globalProperties.$newFunction = () => {}。如果您想在引导文件中访问Quasar函数，可以使用以下方法：app.config.globalProperties.$q.notify(...)。 - redigaffi

Answer 1

1. 是的，你说得对。它创建了一个全局的axios实例，可以在Vue的所有组件中使用。因此，你不需要在多个文件中导入axios并创建多个实例，而是可以创建一个公共实例，并将所有公共属性集中在一起。例如，你可以在一个地方定义拦截器和URL，而不是让它们分散在各处。

2. Vue在其网站上非常清楚地定义了它。

这里没有什么魔法。$是Vue用于对所有实例可用的属性的约定。这避免了与任何已定义的数据、计算属性或方法发生冲突。

3. 有多种方法可以做到这一点。如果你在.vue文件中，可以直接通过this.$axios()访问它。如果你想通过Vuex存储访问它，你需要传递组件上下文或者你可以在JS文件中使用它 import Vue from 'vue' ，然后像这样使用 Vue.prototype.$axios()

4. 它也可以在JS文件中工作。按照第3步中的说明进行操作。

5. 参考第4步。

- Sujil Maharjan