[JavaScript知识库]electron+vue项目中通信

在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文件中通知主进程

1. vue中

  methods: {
    async send() {
      const res = await ipcRenderer.invoke('msg', this.msg, 12, 23, 56)
      console.log(res)
    },
  },

2. 主进程中

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)