Vue.js Electron：在后端和前端

Question

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

使用Electron我有三个我知道的选项：

1。用'requrie'来拉它 require('electron').remote.require("./main.js")
就像我一样，我可以访问所有已公开的变量  exports.<someFunctionOrVar>
不幸的是，这对我来说不正常，因为webpack-configuration不允许它，我更喜欢使用webpack热模块重新加载。

2。用“全局”来拉它 require('electron').remote.getGlobal('myVarOrFunction')
这非常适合保持数据同步。我的所有设置都在一个存储在主进程中的settings-object中。一旦我拉动对象并使用getGlobal并将其存储在我的vue数据变量中，我就可以访问所有字段以预填充我的设置表单，当我在表单中更改某些内容时，它也会到达后端。
这个问题是，由于解释的限制here

，因此数据更改时vue不更新​​DOM是此设置对象

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

应该简单地解决诸如保持main和渲染器进程之间的数据同步的问题。我只是没有得到如何有效地解决这个问题和使用过的vue框架。 如何在主流程和重新申请流程之间保持数据同步？

Answer 1

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