En Vue2, pude acceder a mi instancia de Vue para utilizar los componentes registrados con Vue.
prueba.js
import Vue from 'vue' export function renderLogin () { Vue.toasted.show('Please login again', { type: 'error', duration: 2000 }) }En el código anterior, puedo acceder al paquete tostado porque ya lo he registrado con Vue en mi main.js. Sin embargo, en Vue3 no puedo usar el paquete tostado ya que no puedo acceder a la instancia de Vue dentro de un archivo js.
Necesita ayuda sobre cómo acceder a la instancia de Vue ('this') dentro de un archivo js.
Después de un día de búsqueda, pude acceder al componente tostado desde la instancia de vue dentro de un archivo js.
Primero, tendríamos que exportar la instancia de la aplicación para poder leerla en un archivo js
principal.js
export const app = createApp({ render() { return h(AppWrapper); }, });A continuación, tendríamos que registrar nuestro componente en nuestras propiedades globales de la instancia de nuestra aplicación.
app.config.globalProperties.$toast = toast;Ahora podemos importar la instancia de la aplicación en nuestro archivo js y acceder al componente de brindis
prueba.js
import { app } from '@/main.js' app.config.globalProperties.$toast('Toast working fine', { type: 'success', duration: 2000, })Espero que esto ayude a alguien. Por favor, hágame saber si hay otras/mejores formas. Gracias
// API de composición de Vue 3
<script> import { getCurrentInstance } from 'vue'; export default { setup() { const _instance = getCurrentInstance(); const vueInstance = _instance.appContext; }, }; </script>No es exactamente como en Vue2, pero esto probablemente expondrá lo que está buscando.
Si desea que un paquete esté disponible globalmente en Vue3, probablemente necesite agregar el siguiente código a un complemento:
//* This will help for accessing the toasted instance in other files (plugins) app.config.globalProperties.$toasted = toasted; //* This will expose the toasted instance in components with this.$toasted app.provide('$toasted', toasted); Con esto, puede obtener la instancia tostada en la API de opciones con: this.$toasted
Y con la api de composición: const { $toasted } = _instance.appContext.app.config.globalProperties;
Y en otro complemento con: constructor(app) { app.config.globalProperties; }
Puede usar proveedor/inyectar .
Por ejemplo, si desea usar axios en mis componentes, proporcione axios en su main.js
import { createApp } from "vue"; import App from "./App.vue"; import axios from "axios"; const app = createApp(App); app.provide("http", axios); app.mount("#app");Luego, en el componente SFC, puede acceder de 2 maneras:
// Composition API <script> import { inject } from 'vue' export default { setup() { const http = inject("http"); http.get("https://jsonplaceholder.typicode.com/todos/1").then((response) => { console.log(response.data); }); } } </script> // Vue 2 options API <script> export default { inject: ["http"], } </script>Respuesta original aquí .