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

Access instance/service from Vuex that was provided to Vue (Vue.js 3)(从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方法不能在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);

以上似乎是反模式，但.

推荐答案

在模块化环境(通常是VUE 3安装程序)中，更好的方法是只在使用它的位置导入api，而不考虑它是在组件内部还是外部使用。

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

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

应避免使用window的解决方案，除非应用程序被分成不能通过公共JS模块交互的单独脚本。即使这样，问题也是定义全局变量的脚本应该在使用它的脚本之前加载。

这篇关于从Vuex访问提供给Vue的实例/服务(Vue.js 3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！