Vuex и электрон, переносящие состояние в новое окно

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 не одни и те же this.$store, как его loginWindow что было .close() 'd

Есть ли способ передать Vuex this.$store в мое новое окно, поэтому мне не нужно переписывать все в mainWindow с постоянным скрыть его, изменить его представление, плюс я хочу иметь другие окна (список друзей и т. д.), которые будут полагаться на состояние Vuex.

Надеюсь, что это не слишком смущает, если вам нужно уточнение, просто спросите. Благодарю.

Answer 1

Хотя я могу потенциально видеть, как вы можете это сделать, я бы добавил отказ от ответственности, что, поскольку вы используете Vue, вы не должны. Вместо этого я бы использовал компоненты vue для создания этих отдельных видов, а затем вы можете достичь своих целей в SPA. Компоненты также могут быть динамическими, которые, вероятно, помогут с вопросом вы должны прятать их в MainWindow, т.е.

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

Тогда вы просто установить CurrentView с именем компоненты и он будет иметь полный доступ к вашему магазину Vuex, в то время как только установка/отображение желаемого вида.

Однако, поскольку вы изучаете это, я считаю, что должно быть возможно передать значения магазина в пределах loginWindow до mainWindow, но это не было бы чистым решением Vue.

Вместо создания метод в случае loginWindows Вью, который выводит простой объект, содержащий все key: value утверждает, вы хотите передать. Затем вы устанавливаете переменную 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 между ними.

С уважением