我们来聊聊一个不必要但却很流行的 Vue 插件。

罪犯

vue-axios

另一种选择

区别与借口

结论

几天前，一条关于某个流行的 npm 包包含恶意代码的新闻迅速传播开来。这件事提醒我们，在将任何包添加到依赖项之前，都应该三思。

这让我想起了我见过几次的一个不必要的 Vue 插件。Vue 的学习曲线平缓，因此深受初级开发者的欢迎，因为对他们来说，弄清楚自己该写什么以及该安装什么插件就更加困难了。

罪犯

我想介绍的这个包/插件是 vue-axios。如果你在谷歌上搜索“vue axios”，它就是第一个搜索结果。我认为这就是它如此受欢迎的主要原因。

npm install --save axios vue-axios

// import Vue from 'vue'   // in Vue 2
import * as Vue from 'vue' // in Vue 3
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

const app = Vue.createApp(...)
app.use(VueAxios, axios)

让我们来看看一款拥有超过 1000 个 GitHub 星标和每周 23000 次下载量的插件是做什么的。我们可以先阅读一下它的描述：

用法：

这个包装器将 axios 绑定到 Vue，或者如果您使用的是单文件组件，则使用此包装器。

此外，还有一个代码示例，使插件的使用方法更加清晰：

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

基本上，这个包允许你导入一次 axios，然后在每个组件中使用它。

这其实非常实用。你不仅不必在每个组件中都导入 axios，还可以创建一个带有自定义配置的 axios 实例，并在所有组件中使用它。然而，插件的描述中并没有明确提及这一点，所以我不太确定安装该插件的用户是否了解它。

另一种选择

我们发现这个插件确实很有用。那么问题出在哪里呢？让我们不用插件来实现同样的功能：

import Vue from 'vue'
import axios from "axios";

Vue.prototype.$http = axios;
Vue.prototype.axios = axios;

让我们将其与配置插件所需的代码进行比较：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

我们可以看到，自己编写整个功能所需的代码行数与配置插件所需的代码行数相同。

最后，我们来展示一下将 axios 与 Vue 结合使用的增强版方法：

import Vue from 'vue'
import axios from "axios";

const instance = axios.create({
  baseURL: 'https://myapi.com'
});

const instanceUserApi = axios.create({
  baseURL: 'https://userapi.com'
});
instanceUserApi.defaults.headers.common["Authorization"] =
  "Token" + localStorage.getItem("authToken");

Vue.prototype.$http = instance;
Vue.prototype.$httpUserApi = instanceUserApi;

我们可以创建多个 axios 实例，每个实例都可以使用不同的配置。这个插件不仅没有任何价值，而且灵活性也比不上我们自己的代码。需要说明的是，该插件允许你在配置过程中传递一个对象来创建多个 axios 实例。

区别与借口

正如 GitHub issue
#18 中所述：Vue.prototype 和 vue-axios 的区别是什么？

该插件使属性（axios 和 $http）变为不可变。对于某些人来说，这可能比上一段描述的方法更具优势。然而，我相当确信，使用此插件的绝大多数开发者并不真正关心属性的不可变性。

结论

Vue-axios 插件的功能正如其描述。在我看来，这里面没有任何欺诈或恶意行为。只是有些开发者缺乏相关知识，在向项目中添加内容时没有仔细考虑而已。

您如何看待这类小型插件/软件包？
您认为这类插件的开发者是否应该公开替代方案？