I am working on a Vue-Electron app. Let's imagine a settings page in the frontend with some variables you can fiddle with. Of course I want to preserve all the settings even upon settings-page reload. To do so, I figured it is necessary to store the values in a settings-object in the backend, pulling them back on the page upon reload.
Using Electron I have three options I know of:
1. Pull it with 'requrie'
require('electron').remote.require("./main.js")
Like that I can access all the variables that have been made public with
exports.<someFunctionOrVar>
Unfortunately this doesn't work properly for me since the webpack-configuration doesn't allow it and I prefer using the webpack hot module reload.
2. Pull it with 'global'
require('electron').remote.getGlobal('myVarOrFunction')
This works quite well to keep the data in synch. All my settings are in a settings-object that is stored in the main process. Once I pulled the object and with getGlobal and stored it in my vue data variable I can access all the fields to pre-fill my settings forms and when I change something in the forms, it also reaches the backend.
Problem with this one is, that vue doesn't update the DOM upon data changes is this settings object due to the limitations explained here
3. IPC
Using Electron's IPC I would have to set up a channel for each and every settings variable so that the vue.js frontend stays reactive while still keepig the backend in synch. This is not ideal after all.
It should be simple to tackle something like keeping the data in synch between main and renderer process. I just don't get how to solve this problem efficiently and with respect to the used vue framework. How can I keep the data synchronized between main process and rederer process?
