Considera lo siguiente:
// app.js import API from 'utils/API'; const api = new API(config.app.urls.api, endpoints, token); app.provide('$api', api);Basado en todo lo que he leído en las últimas 24 horas, el anterior es el método recomendado para proporcionar un "servicio" a Vue.js 3.
Sin embargo, el problema con lo anterior es que ahora no puedo acceder a la instancia de API ya que el método de inject no se puede usar fuera de un componente de Vue.
Como tal, cuando quiero importar la instancia de API en mis módulos Vuex, no puedo...
¿Existe una forma 'aconsejada' de acceder a un servicio proporcionado fuera de un componente de Vue? ¿O es una de mis soluciones propuestas a continuación cómo se debe hacer?
Solución propuesta 1
En lugar de proporcionar el servicio a Vue, podemos agregarlo a las propiedades globales de la siguiente manera:
// app.js app.config.globalProperties.$api = api;y luego podemos acceder a él así en la tienda:
// some-vuex-module.js import { getCurrentInstance } from 'vue'; const api = getCurrentInstance().appContext.config.globalProperties.$api;Estoy usando lo anterior para ciertas cosas en mi aplicación, pero para el servicio API parece incorrecto hacerlo de esta manera.
Solución propuesta 2
Otra solución en la que pensé fue simplemente hacer que la instancia de API esté disponible para la ventana de esta manera:
// app.js import API from 'utils/API'; const api = window.api = new API(config.app.urls.api, endpoints, token); app.provide('$api', api);Sin embargo, lo anterior parece un anti-patrón ...
El método preferible en un entorno modular (que suele ser la configuración de Vue 3) es simplemente importar la api en los lugares donde se usa, independientemente de si se usa dentro o fuera del componente.
La solución con la propiedad global de Vue se originó en el momento en que las aplicaciones de Vue no eran necesariamente modulares, por lo que dependían de la instancia de Vue como ámbito de aplicación global. Actualmente, solo es adecuado para propiedades que se usan principalmente en una plantilla y requieren un código repetitivo para importarlas y exponerlas. El ejemplo es $t en vue-i18n .
La solución con provide / inject se puede usar para casos que necesitan inyección de dependencia. Un caso común es una biblioteca que requiere que las dependencias estén débilmente acopladas. Otra es que una dependencia depende de la jerarquía de componentes y puede variar entre componentes.
Se debe evitar la solución con window , a menos que la aplicación se divida en scripts separados que no puedan interactuar a través de módulos JS comunes. Incluso entonces, el problema es que un script que define una variable global debe cargarse antes que aquellos que lo usan.