electron+vue项目中的通信

您所在的位置：网站首页 › electron进程通信优化 › electron+vue项目中的通信

electron+vue项目中的通信

2023-09-02 15:45| 来源: 网络整理| 查看: 265

在electron+vue项目中，package.json的main所运行的是主进程，代表服务端。 vue的部分是项目的渲染进程。主进程和渲染进程的通信通过ipcMain.handle和ipcRenderer.invoke

1、在vue中引入ipcRenderer

主进程中引入ipcMain没啥大问题。在vue文件中引入ipcRenderer，需要先在vue.config.js中配置 nodeIntegration: true

pluginOptions: { electronBuilder: { // 在vue中能引入electron模块 nodeIntegration: true,

然后在各个vue文件中引入

import { ipcRenderer } from 'electron' 2、渲染进程通知主进程

即在vue文件中通知主进程

vue中 methods: { async send() { const res = await ipcRenderer.invoke('msg', this.msg, 12, 23, 56) console.log(res) }, }, 主进程中 function handleIPC() { ipcMain.handle('msg', function (e, ...args) { console.log('参数', args); return 112233 }) }

在回调中，第一个参数是事件参数，后面的所有参数都是渲染进程传过来的参数。

handleIPC函数在app.on(‘ready’)的回调中运行一下。

app.on('ready', async () => { ... handleIPC(); }) 3、主进程通知渲染进程

主进程通知渲染进程的方法另有文章叙述。在vue项目中也是一样。在vue中响应主进程的通知时，可以在多个组件的created钩子中进行注册，例如在home组件中

created() { ipcRenderer.on('hehe', (e, ...args) => { console.log('home中的响应', args) }) },

回调的参数同上。同在vue中注册事件一样，在beforeDestoryed钩子中，注意要移除掉，不然在此调用created钩子中就会重复注册 ipcRenderer.removeListener(channel, listener) 或者 ipcRenderer.removeAllListeners(channel)

【本文地址】

electron+vue项目中的通信

electron+vue项目中的通信

今日新闻

推荐新闻