如何将组件对象放入合成 API 中的全局窗口变量中？

Posted 2023-02-16

【中文标题】如何将组件对象放入合成 API 中的全局窗口变量中？

【英文标题】：How to put a component object into a global window variable in Composition API?

【发布时间】：2021-12-08 10:17:32

【问题描述】：

在 Vue2（选项 API）中，我将 this 放入了一些组件的窗口变量中，因此我可以轻松地测试方法并从开发工具控制台中找出哪些属性值。 例如，在我的主页组件中，我只是这样做：

mounted() 
  window.mainpage = this

这样，当我想从控制台运行一个方法时，我可以轻松做到：

mainpage.somemethod()

或mainpage.someproperty 获取该属性的值。

我不知道如何在 Vue3 中使用 Composition API 做到这一点。我已经查看了getCurrentInstance()，但这似乎与 Vue2 中的对象不同。不知何故，组件的方法和属性不在此对象中。

任何想法如何让它工作或从控制台调试组件的其他方式？

更新 我想我找到了解决方案：

在setup():

  const instance = getCurrentInstance();

在onMounted()

  window.mainpage = instance.ctx;

ctx 可以解决问题。现在在 devtools 控制台中，您可以访问组件的属性和执行方法，但只能访问在 setup 中返回的那些。

【问题讨论】：

你能提供一些代码吗？我threw together this jsfiddle 似乎工作正常

嗨，我忘了说我正在使用 Composition API 进行尝试。

组合 API 的 setup 方法没有对组件的引用，因为组件尚未创建。相反，返回您在setup 中定义的任何属性，并且您在mounted 中应用的绑定将为您提供正确的访问权限。 Here's a jsfiddle for you

对不起，我只知道如何对组件使用 SFC（.vue 文件）。我使用onMounted()（Composition API），其中window.mainpage = this 似乎不起作用（未定义）。

FWIW，这在 Vue 开发工具中很少需要。它们允许在控制台中访问组件实例。您可以在设置中执行window.mainpage = getCurrentInstance()（不是 onMounted）。您可能会遇到问题，因为组合 API 是功能性的，并非所有内容都被公开。

【参考方案1】：

在setup()方法里面，试试：

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

您也可以从 Vue3 生命周期回调中调用 getCurrentInstance。

【讨论】：

不知何故，proxy 似乎与ctx 属性相同？

proxy 应该与您在 Vue2 方法中调用 this 的实例相同。