Vue.js Electron：在后端和前端之间同步变量

Question

我正在开发一个 Vue-Electron 应用程序。让我们想象一下前端的设置页面，其中包含一些您可以摆弄的变量。当然，即使在设置页面重新加载时，我也想保留所有设置。为此，我认为有必要将值存储在后端的设置对象中，并在重新加载时将它们拉回页面。

使用 Electron 我知道三个选项：

1.用'requrie'拉它
require('electron').remote.require("./main.js")
像这样，我可以访问所有已公开的变量
exports.<someFunctionOrVar>
不幸的是，这对我来说不能正常工作，因为 webpack-configuration 不允许这样做，我更喜欢使用 webpack hot module reload。

2。用 'global' 拉它
require('electron').remote.getGlobal('myVarOrFunction')
这可以很好地保持数据同步。我所有的设置都在一个存储在主进程中的设置对象中。一旦我拉出对象并使用 getGlobal 并将其存储在我的 vue 数据变量中，我就可以访问所有字段以预先填写我的设置表单，当我更改表单中的某些内容时，它也会到达后端。
这个问题是，由于here

3。工业PC
使用 Electron 的 IPC，我必须为每个设置变量设置一个通道，以便 vue.js 前端保持反应性，同时仍然保持后端同步。毕竟这并不理想。

解决诸如在主进程和渲染器进程之间保持数据同步之类的问题应该很简单。关于使用的 vue 框架，我只是不知道如何有效地解决这个问题。 如何保持主进程和rederer进程之间的数据同步？

Answer 1

我发现保持应用状态跨页面一致的最佳方法是使用Vuex。使用 store 和 mutators，您可以轻松设置一个设置页面，在您的应用程序中传播值。您还可以通过计算变量将初始表单状态绑定到存储，以确保观察者正确触发。