一、問(wèn)題場(chǎng)景

最近是在使用Electron+Vue構(gòu)建一個(gè)基于modbus rtu協(xié)議的上位機(jī)應(yīng)用，使用ipcMain和ipcRenderer實(shí)現(xiàn)點(diǎn)擊Vue組件后打開(kāi)對(duì)話框，獲取到文件路徑并寫(xiě)入數(shù)據(jù)，完成后通知。但是出現(xiàn)ipcRenderer.on() 調(diào)用多次的錯(cuò)誤情況。
那么，使用Electron+Vue實(shí)現(xiàn)文件保存的正確姿勢(shì)是什么呢？

創(chuàng)新互聯(lián)長(zhǎng)期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為江北企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，江北網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

二、具體實(shí)現(xiàn)

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

// 1. 引入對(duì)話框與IPC通信模塊
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog

// 2.定義IPC主進(jìn)程響應(yīng)函數(shù)
ipc.on('open-save-chart-dialog', function (event) {
    dialog.showSaveDialog({
        title: '保存圖像文件',
        defaultPath: '/',
        filters: [
            {
                name: 'Images',
                extensions: ['png', 'jpg']
            }
        ]
    }, function (filename) {
      // 通知渲染進(jìn)程，將獲取到的文件路徑傳給Vue組件中響應(yīng)函數(shù)
      event.sender.send('save-finished', filename);
    })
})

在Vue的組件中定義觸發(fā)函數(shù)和響應(yīng)函數(shù)，這里是MainPage.vue

（1）首先為Button綁定Click點(diǎn)擊事件：

保存

（2）接下來(lái)在script代碼塊的methods中定義handleSaveChart方法

export default {
    methods: {
        handleSaveChart: function () {
                // 向IPC通道發(fā)送信號(hào)，此時(shí)主線程收到信號(hào)立即執(zhí)行相對(duì)應(yīng)的響應(yīng)函數(shù)
                const ipc = require('electron').ipcRenderer;
                ipc.send('open-save-chart-dialog');
          }
        }
}

（3）在Vue組件的created方法中定義主線程向渲染線程發(fā)送信號(hào)的響應(yīng)函數(shù)

created() {
     const ipc = require('electron').ipcRenderer;
     ipc.on('save-finished', function (event, filename) {
         // 當(dāng)filename等于null的時(shí)候表示用戶點(diǎn)擊了取消按鈕
         // 當(dāng)用戶點(diǎn)擊保存按鈕的時(shí)候filename的值是對(duì)應(yīng)文件的絕對(duì)路徑
         console.log(filename)
      })
}