Search code examples
vue.jselectronvuex

Electron Ipc render emit event to Vuex


Hi guys I'm building an app with multiple windows,

My App is developed in Vue + Electron

The main feature I'm trying to accomplish is when the user for example wants to do some action in electron open popup for example, and next I want to send action to Vuex store to display message to user

So How can I call Vuex action from electron?

Code Sample:

Vue component:

import { remote, ipcRenderer } from 'electron';

ipcRenderer.send('openPopup', id);

Electron Code:

import { ipcMain, app } from 'electron';


ipcMain.on('openPopup', (event, args) => {
    console.log('do some action');
    // now how can I call vuex action from here
});

I tried calling it with:

this.$store

but its undefined


Solution

  • You could simply return the desired data back to the renderer process in the ipcMain.on event.

    I would also recommend using ipcRenderer.invoke / ipcMain.handle (Electron Doc - ipcMain)

    // Main process
    ipcMain.handle('openPopup', async (event, ...args) => {
      const result = await somePromise(...args)
      return result
    })
    
    // Renderer process
    async () => {
      const result = await ipcRenderer.invoke('open-popup', id)
      // this.$store.dispatch(....) etc etc
    }