vue-electron에서 새창을 열어 데이터 넘기기

달새 vue-electron로 개발하는 과정에서 문제가 생겼다.

기존 버전에서는 이미지를 열었을 때 팝업(새창)의 형태였다

근데 vue-electron환경에서는 이게 안 되더라

이유인 즉슨, vuex의 데이터가 새창과 공유가 되지 않는다.

근데 웃긴 건 dispatch는 먹힌다... 같은 이름은 다 존재하는데 데이터가 안 넘어온다

vue route 등등 별의별 똥꼬쑈를 하다가 우연히 보게 된 게 있다

항상 맨땅에 헤딩하면서 배우는 편이다보니 이거에 대한 존재를 몰랐다

ipcMain, ipcRenderer

이게 무엇이냐면 electron의 main proccess와 browserwindow와의 통신을 이어주는 모듈이다

앞에서 했던 삽질은 다 필요없고 이젠 기억도 안 나고 중요한 소스코드만 봅시다

모든 소스 코드는 달새 mk-iii(가칭)에서 사용하는 코드를 최대한 그대로 옮겨 적습니다.

 

electron의 main.js파일입니다.

https://github.com/hanalen-/Dalsae/blob/master/MainSrc/src/main/index.js

const {app, BrowserWindow, ipcMain, ipcRenderer} = require('electron');//main.js최상위에 선언 되었을 것입니다. 수많은 main.js중 electron이 들어간 파일을 찾으세요

ipcMain.on('child', (event, tweet, option)=>{//MainWindow에서 이미지를 띄우기 위해 데이터를 main으로 보냈고 main에서 수신하는 부분입니다.
  var win = new BrowserWindow({
    show:false,//show는 false로 해야 데이터를 보낼 수 있습니다. 이유는 바로 아래 주석 참조
  });
  const modalPath = process.env.NODE_ENV === 'development'? 'http://localhost:9080/#/Image' : `file://${__dirname}/index.html#Image`//개발환경일 경우의 route설정과 빌드파일일 경우의 route설정입니다.
  win.loadURL(modalPath);//이걸 안 하면 빈페이지만 뜨게 될 것입니다. route설정도 필수고요 아래에 있습니다.
  win.on('ready-to-show', ()=>{//ready-to-show는 필수입니다. ready-to-show이전에 데이터 전송 시 못받습니다. 그래서 BrowserWindow 생성 시 show: false가 필수입니다.
    win.webContents.send('tweet', tweet, option);//win 객체에 데이터를 보냅니다. 데이터는 tweet, option입니다.
    win.show();//이제 데이터도 보냈겠다 show해줍시다
  })
  }

이미지 창을 띄우기 위한 route설정파일인 index.js입니다. 해당 파일은 라우트 설정 파일에 있습니다.

https://github.com/hanalen-/Dalsae/blob/master/MainSrc/src/renderer/router/index.js

  {
    path: '/Image',
    name:'Image',
    component: require('@/components/Modals/ImagePopup').default,
  },  

아래는 Tweet.vue입니다. 데이터를 보내는 곳입니다.

https://github.com/hanalen-/Dalsae/blob/master/MainSrc/src/renderer/components/Tweet/Tweet.vue

   ImageClick(e){
     var ipcRenderer = require('electron').ipcRenderer;//ipcRenderer를 선언 후 데이터를 보내줍니다.
     ipcRenderer.send('child', this.tweet, this.option);//ipcRenderer.send('이벤트 이름', 데이터1, 데이터2, 데이터3....)
  }

아래는 ImagePopup.vue입니다. 데이터를 받는 곳이죠.

https://github.com/hanalen-/Dalsae/blob/master/MainSrc/src/renderer/components/Modals/ImagePopup.vue

  created: function(){//create에서 해야 정상 동작 했던 거로 기억 합니다.
    var ipcRenderer = require('electron').ipcRenderer;//ipcRenderer를 선언해야 합니다
    ipcRenderer.on('tweet', (event, tweet, uiOption) => {//ipcRenderer.on('이벤트이름', (event, 객체1, 객체2, ...) 첫 파라메터는 무조건 event입니다.
    this.tweet=tweet;//받은 데이터를 지지고 볶고 해줍시다.
    this.uiOption=uiOption;
  });

이렇게 하면 이미지 팝업에 데이터를 보낼 수 있습니다.

쉽게 요약하자면

1. 특정 window에서 ipcRender.send('이벤트', 데이터); 로 mainproccess에 데이터를 보냅니다.

2. mainproccess가 받아서 새 창을 생성 후 데이터를 전송, show:false로 한 후 ready-to-show이벤트로 생성하지 않으면 못 넘깁니다!

3. 새 창에서 ipcRenderer.on('이벤트', 데이터); 로 데이터 수신

짜잔! 이미지 팝업에서 데이터를 받아서 이미지를 표시 할 수 있습니다

실제 소스코드가 적용 된 파일의 링크도 첨부 했습니다.

폴더 경로가 바뀐다던가 하면 링크가 깨졌을 경우 아래의 메인 페이지에서 파일을 찾아가서 보시기 바랍니다.

https://github.com/hanalen-/Dalsae 

hanalen-/Dalsae