如何在使用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" style="width: 100%" @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)
      })
}