vue-electron-builder 插件 - 将表单数据从 vue 传递到主电子进程

Question

我正在使用 vuejs 和 vue-cli-electron-builder 插件创建一个跨平台的电子应用程序。我在表单中有一些输入字段，使用户能够提交带有一些附件的表单，我想在应用程序的后台进程中处理这些文件。如何将数据从 vue UI 发送到电子应用程序的主进程？

Answer 1

electron中有两个进程，主进程和renderer进程。一个 Vue 组件在渲染器进程上运行。但是，写入文件在通常由background.js 表示的主进程上运行。我们需要一种方法在这两个进程之间进行通信以写入数据。这种方式称为inter-process communication。 electron 提供ipcMain & ipcRenderer 来实现两个进程之间的通信。

假设您需要将数据从表单（Vue 组件）发送到主进程。我们首先在background.js 中定义一个自定义事件，例如：

import {ipcMain} from "electron"; 

// this is the event listener that listens to the event emitted by the Vue component
ipcMain.on("form-submission-event", (event, args) => writeFormData(args));

在您的 Vue 组件中，您将执行以下操作：

import {ipcRenderer} from "electron";

export default defineComponent({
     methods: {
         submitForm(data){
           // this will send the data to the main process
          ipcRenderer.send("form-submission-event", data)
          }
     }
}

您还可以通过其他方式传递数据，即从主进程到渲染器进程。在此处阅读更多信息：https://www.electronjs.org/docs/api/ipc-main 和此处https://www.electronjs.org/docs/api/ipc-renderer

您可能会收到“找不到目录名”之类的错误消息。解决方法是将以下代码添加到vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }

};