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

Question

背景

考虑以下几点:

// 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 的解决方案可用于需要依赖注入(inject)的情况。一个常见的情况是需要松散耦合依赖关系的库。另一个是依赖关系取决于组件层次结构，并且可能因组件而异。

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