将数据从 Puppeteer 传递到 Vue JS 组件

Question

我的应用程序的数据流从后端 API 请求开始，该请求使用 puppeteer 启动 Vue 组件。除了让 Vue 组件调用后端 API 来获取数据之外，还有什么方法可以将数据从后端（express）传递到启动的 vue 组件吗？

我尝试从启动的组件调用后端 API，但这似乎是一种解决方法，而不是实际的解决方案。

Answer 1

将信息从 puppeteer 传递到 vue.js 的一种方法是通过自定义事件和事件监听器

例如，使用 vue3 的组合语法，vue SFC 的 js 部分可能如下所示：

const myData = ref<MyDataObject>()

window.addEventListener('custom:data', e => {
  myData.value = (e as CustomEvent).detail;
})

我相信这与 vue2 中的以下内容相关，尽管我目前无法测试这一点：

...
data: {
  myData: undefined
}
...
mounted: function() {
  window.addEventListener('custom:data',e => {
    this.myData = (e as CustomEvent).detail;
  });
},
...

在傀儡师方面，使用评估方法发送事件：

const myData = {} // data that express got from the initial backend API request
const page = await browser.newPage();
// any other configuration you need to do
await page.evaluate((data) => {
window.dispatchEvent(new CustomEvent('custom:data', {detail: data}));
}, myData)