Vuex 및 Electron의 상태를 새 창으로 전달합니다.

Vuex 및 Electron의 상태를 새 창으로 전달합니다.

저는 현재 Electron을 사용하여 어플리케이션을 만들고 있는데, 현재까지는 훌륭합니다.

사용하고 있다Vue.js그리고.Vuex주로 사용자 상태(프로파일 및 인증됨 등)를 관리하는 앱입니다.

새 창문을 열 수 있는지 궁금한데, 같은 창으로 해주시면 감사하겠습니다.Vuex를 메인 창으로 나타냅니다.

현재 앱 부팅 시 정상적으로 동작하는 사용자 인증이 되지 않은 경우 로그인 창을 보여줍니다.

function createLoginWindow() {
  loginWindow = new BrowserWindow({ width: 600, height: 300, frame: false, show: false });
  loginWindow.loadURL(`file://${__dirname}/app/index.html`);
  loginWindow.on('closed', () => { loginWindow = null; });
  loginWindow.once('ready-to-show', () => {
    loginWindow.show();
  })
}

사용자는 로그인 폼을 실행합니다(성공하면 다음 기능을 실행합니다).

function showMainWindow() {
  loginWindow.close(); // Also sets to null in `close` event
  mainWindow = new BrowserWindow({width: 1280, height: 1024, show: false});
  mainWindow.loadURL(`file://${__dirname}/app/index.html?loadMainView=true`);
  mainWindow.once('resize', () => {
    mainWindow.show();

  })
}

이 모든 것이 효과가 있고, 유일한 문제는mainWindow동일하지 않다this.$store그대로loginWindow그것은..close()d

어떻게 통과시킬 방법이 없을까?Vuex this.$store모든 걸 쑤셔넣지 않아도 되도록mainWindow계속 숨겨야 하고, 뷰가 바뀌어야 하고, 게다가 다른 창(친구 목록 등)을 사용할 수 있게 하고 싶다.Vuex주.

설명이 필요하시면 말씀해주세요.감사합니다.

Vue를 사용하고 있으므로 사용하지 않는 것이 좋다는 면책사항을 추가하겠습니다.대신 vue 컴포넌트를 사용하여 이러한 개별 뷰를 구축하면 SPA에서 목표를 달성할 수 있습니다.컴포넌트는 동적인 경우도 있기 때문에 메인 윈도에서 컴포넌트를 숨기는 문제에 도움이 될 수 있습니다.

<component v-bind:is="currentView"></component>

그런 다음 currentView를 컴포넌트 이름으로 설정하면 원하는 뷰만 마운트/표시하면서 Vuex 스토어에 완전히 액세스할 수 있습니다.

그러나 당신이 그것을 조사하는 동안, 나는 그 안에서 스토어의 가치를 전달할 수 있을 것이라고 생각한다.loginWindow로.mainWindow순수한 Vue 솔루션은 아닙니다.

대신 로그인 내에서 메서드를 만듭니다.Windows Vue 인스턴스는 모든 개체를 포함하는 플레인 개체를 출력합니다.key: value통과시키고 싶은 상태.그런 다음 loginWindows 변수를 다음 글로벌 변수로 설정합니다.mainWindow이를 통해 스토어 내에서 이러한 값을 갱신할 수 있습니다.

# loginWindow Vue model
window.vuexValuesToPass = this.outputVuexStore()
# mainWindow
var valuesToUpdate = window.opener.vuexValuesToPass

그런 다음 기본 윈도우즈 Vue 인스턴스 내에서 전달한 모든 값으로 저장소를 업데이트하는 작업을 설정할 수 있습니다.

각각의 상호작용에 대해 전자의 Browser Window를 사용하고 있다는 사실을 고려하면 ipc 채널 통신으로 하겠습니다.

메인 프로세스용입니다.

import { ipcMain } from 'electron'
let mainState = null

ipcMain.on('vuex-connect', (event) => {
  event.sender.send('vuex-connected', mainState)
})

ipcMain.on('window-closed', (event, state) => {
  mainState = state
})

그런 다음 Vuex 스토어용 플러그인을 생성해야 합니다.ipc라고 부르자.여기 도움이 되는 정보가 있습니다.

import { ipcRenderer } from 'electron'
import * as types from '../../../store/mutation-types'

export default store => {
  ipcRenderer.send('vuex-connect')

  ipcRenderer.on('vuex-connected', (event, state) => {
    store.commit(types.UPDATE_STATE, state)
  })
}

그런 다음 store.commit을 사용하여 전체 스토어 상태를 업데이트합니다.

import ipc from './plugins/ipc'
var cloneDeep = require('lodash.clonedeep')

export default new Vuex.Store({
  modules,
  actions,
  plugins: [ipc],
  strict: process.env.NODE_ENV !== 'production',
  mutations: {
    [types.UPDATE_STATE] (state, payload) {
      // here we update current store state with the one
      // set at window open from main renderer process
      this.replaceState(cloneDeep(payload))
    }
  }
})

이제 창을 닫거나 원하는 다른 이벤트가 발생할 때 vuex 상태를 보냅니다.저장 상태에 대한 액세스 권한이 있는 렌더러 프로세스에 넣습니다.

ipcRenderer.send('window-closed', store.state)

상기 시나리오에 대해서는 구체적으로 테스트하지 않았습니다.새로운 BrowserWindow 인스턴스를 생성하고 Vuex 스토어를 동기화하는 어플리케이션에서 사용하고 있습니다.

안부 전해요

앱을 완전히 한 페이지로 만들자는 GuyC의 제안은 타당하다.SPA 루트 간의 네비게이션을 관리하려면 vue-router를 사용해 보십시오.

원하는 대로 할 수 있는 대략적인 솔루션이 있습니다.vue-router 등의 Import 수고를 덜 수 있지만 페이지 내의 컴포넌트를 설정된 경로로 교체하는 것이 새 페이지를 로드하는 것보다 항상 더 부드럽습니다.새 창을 열면 새 페이지를 열 수 있습니다.window오브젝트, 공유 스테이트를window의 세션 스토리지(또는 일부 글로벌 개체)를 검색하려면 vuex를 새 창에 표시하십시오.created() {if(UIDNotInVuex) tryGetItFromSessionStorage();}.그created일부 컴포넌트가 생성한 후크입니다.

언급URL : https://stackoverflow.com/questions/40656178/vuex-and-electron-carrying-state-over-into-new-window