如何在使用Vue的情况下实现Electron打开文件保存对话框？

一、问题场景

最近是在使用Electron+Vue构建一个基于modbus rtu协议的上位机应用，使用ipcMain和ipcRenderer实现点击Vue组件后打开对话框，获取到文件路径并写入数据，完成后通知。但是出现ipcRenderer.on() 调用多次的错误情况。
那么，使用Electron+Vue实现文件保存的正确姿势是什么呢？

二、具体实现

在electron的src/main/index.js中定义IPC通道

// 1. 引入对话框与IPC通信模块 const ipc = require('electron').ipcMain const dialog = require('electron').dialog // 2.定义IPC主进程响应函数 ipc.on('open-save-chart-dialog', function (event) { dialog.showSaveDialog({ title: '保存图像文件', defaultPath: '/', filters: [ { name: 'Images', extensions: ['png', 'jpg'] } ] }, function (filename) { // 通知渲染进程，将获取到的文件路径传给Vue组件中响应函数 event.sender.send('save-finished', filename); }) })

在Vue的组件中定义触发函数和响应函数，这里是MainPage.vue

（1）首先为Button绑定Click点击事件：

<Button type="info" @click="handleSaveChart">保存</Button>

（2）接下来在script代码块的methods中定义handleSaveChart方法

export default { methods: { handleSaveChart: function () { // 向IPC通道发送信号，此时主线程收到信号立即执行相对应的响应函数 const ipc = require('electron').ipcRenderer; ipc.send('open-save-chart-dialog'); } } }

（3）在Vue组件的created方法中定义主线程向渲染线程发送信号的响应函数

created() { const ipc = require('electron').ipcRenderer; ipc.on('save-finished', function (event, filename) { // 当filename等于null的时候表示用户点击了取消按钮 // 当用户点击保存按钮的时候filename的值是对应文件的绝对路径 console.log(filename) }) }