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

Question

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

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

1.“requrie”
require('electron').remote.require("./main.js")
喜欢，我可以访问已公开与
exports.<someFunctionOrVar>的所有变量把它拉
不幸的是，这不适合我，因为webpack配置不允许它，我更喜欢使用webpack热模块重新加载。

2.将其“全球性”
require('electron').remote.getGlobal('myVarOrFunction')
这工作得很好，以保持数据同步。我所有的设置都在一个存储在主进程中的设置对象中。一旦我将对象和getGlobal拖动并将其存储在我的vue数据变量中，我可以访问所有字段以预先填充设置表单，并且当我更改表单中的某些内容时，它也会到达后端。
问题与这一个是，VUE不更新后的数据更改的DOM是这样设置对象因限制解释here

3 IPC
使用电子的IPC我将不得不建立一个频道为每个设置变量，以便vue.js前端保持反应，同时保持后端同步。毕竟这并不理想。

它应该是简单解决像保持数据同步主要和渲染过程之间。我只是没有得到如何有效地解决这个问题，关于使用的vue框架。 如何保持主进程和进程进程之间的数据同步？

Answer 1

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