时间戳

首页 > 解决方案 > Vue 原型 Axios

javascript - Vue 原型 Axios

问题描述

我是 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 插件仍然有意义吗

标签： javascriptvue.jsaxiosquasar

解决方案

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

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

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

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

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

  3. 请参阅第 4 条。

推荐阅读