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 and here https://www.electronjs.org/docs/api/ipc-renderer

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

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

};

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

vue-electron-builder plugin - passing form data from vue to main electron process

forms

vue.js

electron-builder