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 并发出请求的地方。这networkRequest.js是发出所有请求的唯一点。因为Vue.prototype.$axios = axios只适用于 .vue 文件？使用样板中的 axios 插件是否仍然有意义

Answer 1

1. 是的，你是对的。它创建了一个可用于 Vue 的所有组件的 axios 全局实例。因此，与其在多个文件中导入 axios 并创建它的多个实例，您可以创建一个实例并将该实例的所有公共属性放在一起。例如，您可以在一个地方定义拦截器和 url，而不是将它们散布在各处。

2. Vue 在他们的网站上很好地定义了它

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

3. 您可以通过多种方式做到这一点。如果你在一个.vue文件中，你可以直接通过this.$axios(). 如果你想通过 Vuex 商店访问它，你要么需要传递组件的上下文，要么你可以在 JS 文件中 import Vue from 'vue'使用它并像这样使用它Vue.prototype.$axios()

4. 它也适用于 JS 文件。按照第 3 步中的步骤操作。

5. 参考数字 4。