Javascript 如何在运行NUXT.js和Axios时避免代码重复？

如果类似的代码（如示例中所示）在不同的组件中重复，但在函数参数中传递的名称略有不同

有哪些选项可以将代码单独带到某个地方，然后使用自定义参数将其引入到我的组件中？ （每个部件单独使用）

我应该通过插件来实现吗？

---

如果是这样，那么我如何在组件上实现单独必需的参数+如何只在这些组件上连接插件，而不在其他地方连接插件？

我们可以通过mixin实现。在mixins文件夹中创建一个js文件，并将此函数放在其中，然后将此mixin文件添加到vue文件中以使用此函数。

我用于我的nuxt应用程序。您可以将其用作插件

在plugins文件夹中，创建一个文件

axios.js

import axios from 'axios'

export default axios.create({
   baseURL: process.env.baseURL,
})

注意：我使用lib在环境变量中存储要为API调用的服务器的基本url。这样，就为所有要进行的调用设置了基本url

然后将其导入

numxt.config.js

文件：

module.exports = {
....
{
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
  ...
  },
}

提示：如果必须在axios中全局存储值，如“令牌”或“cookie”。然后可以使用axios方法

---

对于axios调用，您可以创建函数或类并每次导入它

类似于

services/axios

从“axios”导入axios；
const axiosistance=axios.create({
baseURL:process.env.VUE_APP_BASE_URL，
标题：{
“访问控制允许来源”：“*”，
accept:'accept:application/json'，
},
});
导出默认axiosInstance您不需要这样做，因为每个请求都是不同的，最重要的是，当请求成功或失败时，您将执行其他操作
axios.defaults.headers.common = { Authorization: `bearer ${token}` };