How to put a component object into a global window variable in Composition API?-CodePudding

In Vue2 (Options API) I put this into a window variable for some components, so I can easily test methods and find out what property values are from a Dev Tools console. For example in my main page component I simply do:

mounted() {
  window.mainpage = this
}

This way when I want to run a method from the console, I can easily do:

mainpage.somemethod()

or mainpage.someproperty to get the value of that property.

I can't figure out how to do this in Vue3 with the Composition API. I've already looked into getCurrentInstance() but this doesn't seem to be the same kind of object as in Vue2. Somehow the methods and properties of the component aren't in this object.

Any ideas how to get this to work or another way to debug a component from the console?

UPDATE
I think I found a solution:

in setup():

  const instance = getCurrentInstance();

in onMounted()

  window.mainpage = instance.ctx;

The ctx does the trick. Now in the devtools console you can access properties and execute methods of the component, but only those that were returned in setup.

CodePudding user response：

Inside setup() method, try:

setup() {
   ...
   window.mainpage = getCurrentInstance().proxy
   ...
}

You can also call getCurrentInstance from inside the Vue3 lifecycle callbacks.