ElectronJS + Vue.js: Setting up ipcRenderer event handlers

When utilizing the ipcRenderer within a Vue.js view component, make sure you register the IPC event handler once for that component using ‘ipcRenderer.on’ in the ‘mounted’ lifecycle event of the Vue.js component.

If you make the mistake of placing the IPC event handler registration (ipcRenderer.on) inside a function that is called more than once within your component, you will notice a strange side-effect. What you will end up experiencing is that each time your function is called, the ipcRenderer will register a new event handler for the named event and each time that event is called you will see the handler executed X-number of times, with X equal to the number of times the function that contains ‘ipcRenderer.on’ has been called within your component.

If you are not careful, this is an easy mistake to make and a time consuming one to figure out.


 mounted: function () {
    this.$nextTick(function () {
        //Register IPC Renderer event handles once for this control
        ipcRenderer.on('name-of-your-event', (e, args) {
            // TODO: Hanlde the event broadcast here
        });
    });
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s