Vuex und Elektronentransportzustand in ein neues Fenster

Question

Ich baue gerade eine Anwendung mit Electron, die bisher fantastisch ist.

Ich verwende Vue.js und Vuex den Haupt Zustand meiner App zu verwalten, vor allem Benutzerstatus (Profil und wird etc authentifiziert ...)

Ich frage mich, ob es möglich ist, ein neues Fenster zu öffnen, und haben den gleichen Vuex Zustand wie das Hauptfenster z

Ich zeige derzeit ein Anmeldefenster beim Start der App, wenn der Benutzer nicht authentifiziert ist, was gut funktioniert.

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(); 
    }) 
} 

Nutzer hat das Login-Formular, dann wenn sie erfolgreich diese Funktion ausgelöst:

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(); 

    }) 
} 

Das alles funktioniert und alles, das einzige Problem ist, wird die mainWindow nicht die gleiche this.$store wie seine loginWindow teilen das war .close() ‚d

gibt es eine Möglichkeit, die Vuex this.$store mein neues Fenster zu passieren, damit ich nicht alles in mainWindow mit ständig stopfen habe zu müssen Verstecken Sie es, ändern Sie seine Ansicht, und ich möchte in der Lage sein, andere Fenster (Freundesliste usw.) zu haben, die auf dem Vuex Staat beruhen würden.

Hoffe, das ist nicht zu verwirrend, wenn Sie Klärung brauchen nur fragen. Vielen Dank.

Answer 1

Obwohl ich potentiell sehen kann, wie Sie das tun können, würde ich den Haftungsausschluss hinzufügen, dass Sie nicht sollten, wie Sie Vue verwenden. Stattdessen würde ich Vue-Komponenten verwenden, um diese separaten Ansichten zu erstellen, und dann können Sie Ihre Ziele in einem SPA erreichen. Komponenten können auch dynamisch sein, die wahrscheinlich mit dem Problem helfen würden Sie verstecken sie in Ihrem Hauptfenster haben, das heißt

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

Dann würden Sie einfach Current dem Komponentennamen gesetzt und es wäre vollen Zugriff auf Ihre Vuex Speicher, während nur die gewünschte Ansicht montiert/angezeigt wird.

Wie Sie jedoch darüber nachdenken, glaube ich, dass es möglich sein sollte, die Werte des Ladens innerhalb loginWindow zu mainWindow zu übergeben, aber es wäre keine reine Vue-Lösung.

Stattdessen erstellen Sie eine Methode innerhalb der LoginWindows Vue-Instanz, die ein einfaches Objekt mit allen key: value Zuständen ausgibt, die Sie übergeben möchten. Dann setzen Sie die loginWindows-Variable auf eine globale Variable innerhalb von mainWindow, damit sie diese Werte in ihrem Speicher aktualisieren kann. das heißt

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

dann innerhalb mainWindows Vue Beispiel können Sie eine Aktion aktualisieren den Laden mit allen Werten einrichten Sie es übergeben

Answer 2

GuyC Vorschlag der App total Single-Seite Sinn auf Herstellung macht. Probieren Sie vue-router aus, um die Navigation zwischen Routen in Ihrem SPA zu verwalten.

Und ich habe eine grobe Lösung zu tun, was Sie wollen, spart den Aufwand, etwas wie vue-Router zu importieren, aber das Ersetzen von Komponenten auf der Seite durch konfigurierte Routen ist immer reibungsloser als das Laden einer neuen Seite: wenn ein neues Fenster geöffnet wird , wir haben sein window Objekt, können wir die gemeinsamen Zustände auf die window Session Speicher (oder einige globale Objekt) setzen, dann lassen Sie Vuex im neuen Fenster, um es abzurufen, wie created() {if(UIDNotInVuex) tryGetItFromSessionStorage();}. Die created ist der von einer Komponente erstellte Hook.

Answer 3

Mit der Tatsache, dass Sie das BrowserWindow von electron für jede Interaktion verwenden, würde ich mit ipc channel communication gehen.

Dies ist für den Hauptprozess

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 
}) 

Dann brauchen wir ein Plugin für Vuex Speicher zu erstellen. Lass es uns ipc nennen. Es gibt einige hilfreiche Informationen 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) 
    }) 
} 

Danach verwenden Sie die store.commit den gesamten Speicher Zustand zu aktualisieren.

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)) 
    } 
    } 
}) 

Nun müssen Sie den Vuex-Status senden, wenn das Fenster geschlossen wird oder ein anderes Ereignis, das Sie möchten. Setzen Sie dies in den Renderer-Prozess, in dem Sie Zugriff auf den Speicherstatus haben.

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

Beachten Sie, dass ich das obige Szenario nicht speziell getestet habe. Es ist etwas, das ich in einer Anwendung verwende, die neue BrowserWindow-Instanzen hervorbringt und den Vuex-Speicher zwischen ihnen synchronisiert.

Grüße