Comment accéder à l'instance Vue dans le fichier js dans Vue3 ?

Question

Dans Vue2, je peux accéder à mon instance Vue pour utiliser des composants enregistrés dans Vue.

test.js

import Vue from 'vue'

   export function renderLogin () {
     Vue.toasted.show('Please login again', { type: 'error', duration: 2000 })
   }

Dans le code ci-dessus, je peux accéder au package toasté car je l'ai enregistré en utilisant Vue dans main.js. Cependant, dans Vue3, je ne peux pas utiliser le package toasted car je ne peux pas accéder à l'instance Vue dans le fichier js.

Besoin d'aide pour savoir comment accéder à l'instance Vue (« ceci ») dans un fichier js.

Answer 1

//API de composition Vue 3

    sssccc

Ce n'est pas exactement la même chose que dans Vue2, mais cela pourrait exposer ce que vous recherchez.

---

Si vous souhaitez rendre un package disponible globalement dans Vue3, vous devrez peut-être ajouter le code suivant au plugin :

    //* 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);

De cette façon, vous pouvez obtenir l'instance grillée en utilisant la commande suivante dans l'API des options : this.$toasted

Utilisez l'API de composition : const { $toasted } = _instance.appContext.app.config.globalProperties;

Dans un autre plugin : constructor(app) { app.config.globalProperties; }

Answer 2

Après une journée de recherche, j'ai pu accéder au composant toasté à partir d'une instance vue dans un fichier js.

Nous devons d'abord exporter l'instance d'application pour la lire dans le fichier js

main.js

export const app = createApp({
   render() {
     return h(AppWrapper);
   },
});

Ensuite, nous devons enregistrer notre composant dans les globalProperties de l'instance d'application.

app.config.globalProperties.$toast = toast;

Nous pouvons maintenant importer l'instance d'application dans le fichier js et accéder au composant toast

test.js

import { app } from '@/main.js'

app.config.globalProperties.$toast('Toast working fine', {
    type: 'success',
    duration: 2000,
  })

J'espère que cela aidera quelqu'un d'autre. S'il existe un autre/meilleur moyen, faites-le-moi savoir. Merci