在 Vue JS 中，如何使我的 APIService.js 类对组件全局可用，而不需要单独的组件来导入它？

Posted 2023-02-22

【中文标题】在 Vue JS 中，如何使我的 APIService.js 类对组件全局可用，而不需要单独的组件来导入它？

【英文标题】：In Vue JS, how can I make my APIService.js class globally available to components without requiring individual components to import it?

【发布时间】：2020-05-30 13:31:11

【问题描述】：

几乎我的所有组件都需要与我的 apiservice.js 类进行某种交互，该类导入 Axios 并根据调用的方法发出适当的 http 请求。我知道这通常不被推荐，但是，在我的每个组件中，我都有以下内容：

import APIService from '../store/APIService.js';
const apiService = new APIService();

我的 APIService.js 看起来大致是这样的（为简单起见进行了删减）：

import axios from 'axios';
const API_URL = 'http://myserver:82/services/locationmanagement';

export class APIService

constructor()


getLocations() 
    const url = `$API_URL/api/locations/`;
    return axios.get(url).then(response => response.data);


saveLocation(location) 
    let url = `$API_URL/api/locations/`;
    let id = location.id;
    let httpMethod = 'post';

    if(id > 0 ) 
        httpMethod = 'put';
        url = `$API_URL/api/locations/$id`;
    

    let options = 
        method: httpMethod,
        url: url,
        headers:  'Content-Type': 'application/json' ,
        data: location
    

    return axios(options);
   

   

我希望它能够以某种方式提供给全局 Vue 实例，并且我的组件可以以某种方式访问​​它。

我认为这需要在我的 ma​​in.js 文件中以某种形式实现，可能通过 Vue.use，但即使在查看文档后我仍然不确定如何实现它。

任何意见将不胜感激。谢谢！

【问题讨论】：

使用 Vuex，并进行这些存储操作而不是使用类。此外，您不必要地多次实例化您的类。您可以在外部文件中实例化一次并导出实例而不是类本身。

您可以将全局存储视为任何功能的好地方 - 包括数据和方法（即状态和操作） - 不严格连接到组件。一般应用数据和加载过程就是一个很好的例子。

是的，我正在努力将 saveLocation 功能移动到一个操作中，并将结果存储在商店中的“serviceResult”值中，无论是成功还是失败。我在 App.vue 中有一个 DIV，只要“serviceResult”有值就会显示。我希望我可以在我的应用程序中将其用作一种通用的“错误”和“消息”部分，而无需让每个组件自己管理。此外，这将为我打开一种在 Store 中添加某种日志记录的方法，从而从组件中删除更多普遍存在的功能。它还没有完全起作用，但我认为它会。

【参考方案1】：

创建一个Vuejs Plugin 将其导入main.js，并用Vue.use(myservice) 在那里调用它

编辑：

根据评论，一种方法是将插件添加到 Vue 原型中。例如，一个 axios 包装器可以定义为

import axios from 'axios'

export default 

  install:function(Vue,options) 

    Vue.prototype.$dataservice = axios.create(...)
    ...

然后它可以像其他全局 vue 函数一样从组件中调用，例如，$refs、$set、$emit：

 ...
 this.$dataservice.get(...)
 // or
 this.$dataservice.post(...)
 ...

使用数据服务 api，如果使用 Vuex，主要在“动作”中使用它可能很有用。

【讨论】：

如何在组件中调用插件？