如何使用数据创建 BrowserWindow，并在 vue 应用程序中获取该数据？

Question

我有一个Electron-Vue 项目，在这个项目中，当我想显示或创建它时，我想将数据传递给窗口，然后获取该数据并传递给VUE 应用程序，以指定应用程序的状态。

我要传递的数据是一个字符串，用于指定应用程序状态，例如：

download 或 main 或 etc

然后使用上面的字符串，我将在我的应用程序中设置状态，以在创建窗口时根据特定状态呈现布局。基本上我想通过main for win和download for downloadWin

这是background.js，我想在new BrowserWindow() 中传递我的数据，我不想使用ipcRendeder or ipcMain。

let win
let downloadWin
function createDownloadWindow() {
  // Create the browser window.
  downloadWin = new BrowserWindow({ // if it's win i wanna pass main if it's downloadWin i wanna pass download
    title: 'Manage Downloads',
    width: 1200,
    height: 700,
    minWidth: 1200,
    minHeight: 700,
    frame: false,
    titleBarStyle: 'hiddenInset',
    webPreferences: {
      webSecurity: false,
      devTools: true,
      nodeIntegration: false,
      nodeIntegrationInWorker: false,
      contextIsolation: true, // protect against prototype pollution
      enableRemoteModule: false, // turn off remote
      preload: path.join(__dirname, "preload.js"), /* eng-disable PRELOAD_JS_CHECK */
    }
  })
}

现在我想通过在main.js 中创建窗口来获取上面的字符串，以将接收到的数据从mainProcess 传递到vue 应用程序。

new Vue({
  router,
  store,
  vuetify,    
  mounted() {
    this.$store.dispatch('window/setWindowStat', '//SET STRING HERE')
  },
  render: h => h(App)
}).$mount('#app')

Answer 1

您可以通过 IPC 传递您想要的任何数据：

• 在主进程中：https://www.electronjs.org/docs/api/ipc-main
• 在渲染器进程中：https://www.electronjs.org/docs/api/ipc-renderer

这是一个例子：

// In main process.
const { ipcMain } = require('electron')

ipcMain.on('hey', (event, arg) => {
  console.log('hey from win', arg) // prints "{a: 2}" in main process console
})

// send message to your window when it ready (win is your window)
win.webContents.send('hi', {data: 'is here'})

import { ipcRenderer } from 'electron'

ipcRenderer.on('hi', (e, payload) => {
  console.log('hi from main', payload) // prints: {data: 'is here'} in dev tools
})
    
ipcRenderer.send('hey', 'ping', {a: 2})