Vue.js Electron：在后端和前端之間同步變量

Question

我正在開發一個 Vue-Electron 應用程序。 讓我們想象一下前端的設置頁面，其中包含一些您可以擺弄的變量。 當然，即使在設置頁面重新加載時，我也想保留所有設置。 為此，我認為有必要將值存儲在后端的設置對象中，並在重新加載時將它們拉回到頁面上。

使用 Electron，我知道三個選項：

1.用'requrie'拉它
require('electron').remote.require("./main.js")
像這樣我可以訪問所有已公開的變量
exports.<someFunctionOrVar>
不幸的是，這對我來說不能正常工作，因為 webpack-configuration 不允許它，我更喜歡使用 webpack 熱模塊重新加載。

2.用'global'拉它
require('electron').remote.getGlobal('myVarOrFunction')
這可以很好地保持數據同步。 我所有的設置都在一個存儲在主進程中的設置對象中。 一旦我拉出對象並使用 getGlobal 並將其存儲在我的 vue 數據變量中，我就可以訪問所有字段以預先填寫我的設置表單，並且當我更改表單中的某些內容時，它也會到達后端。
這個問題是，由於此處解釋的限制，vue 不會在數據更改時更新 DOM 是此設置對象

3.工控機
使用 Electron 的 IPC，我必須為每個設置變量設置一個通道，以便 vue.js 前端保持反應性，同時仍然保持后端同步。 畢竟這並不理想。

解決諸如在主進程和渲染器進程之間保持數據同步之類的問題應該很簡單。 關於使用的 vue 框架，我只是不知道如何有效地解決這個問題。 如何保持主進程和 rederer 進程之間的數據同步？

Answer 1

我發現保持應用程序狀態跨頁面一致的最佳方法是使用Vuex 。 使用 store 和 mutators，您可以輕松設置一個設置頁面，在您的應用程序中傳播值。 您還可以通過計算變量將初始表單狀態綁定到存儲，以確保觀察者正確觸發。