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

背景

考虑以下：

// 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 https://v3.vuejs.org/api/composition-api.html#provide-inject方法不能在 Vue 组件之外使用。

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

Question

是否有一种“建议”的方式来访问 Vue 组件之外提供的服务？或者我提出的解决方案之一如下should做完了？

可能的解决方案

建议的解决方案 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);

上面的内容似乎是一种反模式......

模块化环境（Vue 3 设置通常是）中的首选方法是仅导入api在使用它的地方，无论它是在组件内部还是外部使用。

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

解决方案与provide/inject适用于需要依赖注入的情况。一个常见的情况是需要松散耦合依赖项的库。另一个问题是依赖关系取决于组件层次结构，并且组件之间可能会有所不同。

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