本文介绍了从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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！