在 Vue.js 应用程序中实现屏幕控制台日志组件

Posted 2023-02-23

【中文标题】在 Vue.js 应用程序中实现屏幕控制台日志组件

【英文标题】：Implement onscreen console log component in Vue.js app

【发布时间】：2020-08-31 12:25:52

【问题描述】：

我正在构建一个 Vue.js 应用程序，该应用程序将在我无法访问开发工具控制台（例如游戏控制台）的设备上运行。我创建了一个包含多个选项卡的 vue DebugPanel 组件，其中一个是要写入的“日志”。

UI 大部分都按我的预期工作，但现在我需要实际获取控制台中的内容并将其输出到组件中的元素。

我想使用this solution 劫持 consol.log 函数。此解决方案在非 Vue html 页面中效果很好，但我无法将其合并到 Vue.js 应用程序中。

我遇到的问题是我的 DebugPanel 上的每个选项卡部分都是基于 v-if 属性隐藏/显示的。 log 元素仅在其 tab 元素显示时才在 DOM 中。所以调用 document.getElementById 错误。

关于如何在 Vue.js 中实现这一点有什么想法吗？

【参考方案1】：

您可以只使用 Vuex 商店通过所有应用程序传递数据。而且我认为在您的应用中使用它来获取全局数据会更好。

【讨论】：

您能否详细说明您将如何针对我的场景执行此操作？你的意思是，有一个store.state.log，我要在上面附加字符串，然后将它绑定到我的日志元素？这些将是 HTML 字符串，如果应用程序运行一段时间，可能会变得相当大。我会担心性能。

store.state.log，正如您所说，但您不需要将 html 保留在那里。您可以将日志保存为数组并执行以下操作： log.文本

这将允许您根据 log.class 保留日志、控制它们的长度并为它们添加一个突出显示