VuexとElectronは新しいウィンドウに新しいウィンドウを表示します

Question

私は現在、これまでのところ素晴らしい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はそのloginWindowと同じthis.$storeを共有しない、ありますそれは.close() 'd

私は新しいウィンドウにVuex this.$storeを渡す方法はありませんので、私はすべてを詰め込む必要はありません。mainWindowそれを非表示にしたり、そのビューを変更したり、Vuex状態に依存する他のウィンドウ（フレンドリストなど）を持たせたいと思っています。

あなたが明確にする必要がある場合は、これだけ混乱しないようにしてください。ありがとう。

Answer 1

これを行う方法がわかりますが、Vueを使用しているときには使用しないでください。代わりに、これらの別々のビューを構築するためにvueコンポーネントを使用し、SPAで目標を達成することができます。コンポーネントはまた、おそらくあなたは、あなたのメインウィンドウでそれらを隠すの持っている問題、すなわち

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

その後、あなたは、単にコンポーネント名にcurrentViewを設定しますと、それはあなたのVuexストアへのフルアクセスを持っているでしょうに役立つと思われるダイナミック可能あなたが望むビューをマウント/表示するだけです。

しかし、あなたはそれを調べているので、loginWindowの店舗の値をmainWindowに渡すことは可能であると信じていますが、それは純粋なVue解決策ではありません。

代わりに、渡したいすべてのkey: value状態を含むプレーンオブジェクトを出力するloginWindows Vueインスタンス内にメソッドを作成します。その後、loginWindows変数をmainWindowのグローバル変数に設定すると、ストア内のこれらの値を更新できます。すなわち

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

は、mainWindows Vueのインスタンス内で、あなたはアプリ完全に単一ページを作る上

Answer 2

GuyCの提案は理にかなっている、あなたがそれを渡されたすべての値でストアを更新するアクションを設定することができます。 vue-routerを使用して、SPA内のルート間のナビゲーションを管理してください。

そして、私はvue-routerのようなものをインポートする努力を省いていますが、設定されたルートでページ内のコンポーネントを置き換えることは、常に新しいページを読み込むよりもスムーズです。 windowオブジェクトがある場合は、windowのセッションストレージ（またはグローバルオブジェクト）に共有状態を設定し、新しいウィンドウ内のvuexにcreated() {if(UIDNotInVuex) tryGetItFromSessionStorage();}のように取得させることができます。 createdは、コンポーネントの作成されたフックです。

Answer 3

電子のBrowserWindowを各インタラクションで使用していることを覚えておくと、私は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と呼んでみましょう。この後here

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ストアを同期させるアプリケーションで使用しているものです。

よろしくお願いいたします。