从 Vuex 访问提供给 Vue 的实例/服务(Vue.js 3)

Question

Background

请考虑以下事项：

// app.js
import API from 'utils/API';
const api = new API(config.app.urls.api, endpoints, token);
app.provide('$api', api);

根据我在过去 24 小时内阅读的所有内容，以上是向 Vue 提供"服务"的建议方法.js 3.

但是，上述问题是我现在无法访问 API 实例，因为inject方法不能在 Vue 组件之外使用。

因此，当我想将 API 实例导入我的 Vuex 模块时，我不能...

问题

是否有一种"建议"的方式来访问 Vue 组件之外提供的服务？还是我提出的解决方案之一应该如何完成？

可能的解决方案

建议的解决方案 1

与其向 Vue 提供服务，我们可以将其添加到全局属性中，如下所示：

// app.js
app.config.globalProperties.$api = api;

然后我们可以像在商店中一样访问它：

// some-vuex-module.js
import { getCurrentInstance } from 'vue';
const api = getCurrentInstance().appContext.config.globalProperties.$api;

我在我的应用程序中将上述内容用于某些事情，但对于 API 服务，这样做似乎是错误的。

建议的解决方案 2

我想到的另一个解决方案是使 API 实例可用于窗口，如下所示：

// app.js
import API from 'utils/API';
const api = window.api = new API(config.app.urls.api, endpoints, token);
app.provide('$api', api);

以上似乎是一种反模式...

Answer 1

模块化环境中(Vue 3 设置通常是)中更可取的方法是将api导入到使用它的地方，无论它是在组件内部还是外部使用。

具有 Vue 全局属性的解决方案起源于 Vue 应用程序不一定是模块化的时代，因此它们依赖于 Vue 实例作为全局应用程序范围。目前，它仅适用于主要用于模板且需要样板代码才能导入和公开它们的属性。该示例在vue-i18n中$t。

具有provide/inject的解决方案可用于需要依赖注入的情况。一种常见的情况是需要松散耦合依赖项的库。另一个是依赖项取决于组件层次结构，并且可能因组件而异。

应避免使用window的解决方案，除非应用程序被划分为无法通过公共JS模块进行交互的单独脚本。即便如此，问题还是应该在使用它的脚本之前加载定义全局变量的脚本。