Vuex and Electron carrying state over into new window

Although I can potentially see how you may do this I would add the disclaimer that as you are using Vue you shouldn't. Instead I would use vue components to build these seperate views and then you can achieve your goals in an SPA. Components can also be dynamic which would likely help with the issue you have of hiding them in your mainWindow, i.e.

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

Then you would simply set currentView to the component name and it would have full access to your Vuex store, whilst only mounting / showing the view you want.

However as you are looking into it I believe it should be possible to pass the values of the store within loginWindow to mainWindow but it wouldn't be a pure Vue solution.

Rather you create a method within loginWindows Vue instance that outputs a plain Object containing all the key: value states you want to pass. Then you set the loginWindows variable to a global variable within mainWindow, this would allow it to update these values within its store. i.e.

# loginWindow Vue modelwindow.vuexValuesToPass = this.outputVuexStore()# mainWindowvar valuesToUpdate = window.opener.vuexValuesToPass

then within mainWindows Vue instance you can set up an action to update the store with all the values you passed it

Giving the fact that you are using electron's BrowserWindow for each interaction, i'd go with ipc channel communication.

This is for the main process

import { ipcMain } from 'electron'let mainState = nullipcMain.on('vuex-connect', (event) => {  event.sender.send('vuex-connected', mainState)})ipcMain.on('window-closed', (event, state) => {  mainState = state})

Then, we need to create a plugin for Vuex store. Let's call it ipc. There's some helpful info 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)  })}

After this, use the store.commit to update the entire store state.

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

Now it remains to send the vuex state when window closing is fired, or any other event you'd like. Put this in renderer process where you have access to store state.

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

Keep in mind that i've not specifically tested the above scenario. It's something i'm using in an application that spawns new BrowserWindow instances and syncs the Vuex store between them.

Regards

GuyC's suggestion on making the app totally single-page makes sense. Try vue-router to manage navigation between routes in your SPA.

And I have a rough solution to do what you want, it saves the effort to import something like vue-router but replacing components in the page by configured routes is always smoother than loading a new page: when open a new window, we have its window object, we can set the shared states to the window's session storage (or some global object), then let vuex in the new window to retrieve it, like created() {if(UIDNotInVuex) tryGetItFromSessionStorage();}. The created is some component's created hook.