javascript - Vue.js Electron : Synchronize variables between backend and frontend

标签 javascript node.js vue.js electron

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

使用 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。工控机
使用 Electron 的 IPC,我必须为每个设置变量设置一个 channel ,以便 vue.js 前端保持 react 性,同时仍保持后端同步。这毕竟并不理想。

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

最佳答案

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

关于javascript - Vue.js Electron : Synchronize variables between backend and frontend,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46239309/

相关文章:

node.js - 在 Cloud9 IDE(容器)中使用 Vue CLI : 'Invalid Host Header'

javascript - 如何使用纯 JS 通过 AJAX 获取文件夹中的所有图像?

javascript - 如何将passport js配置放在一个公共(public)文件中

node.js - 没有 eslint 输出

c# - SignInManager.SignInAsync 没有让我登录(Vue.js SPA)

javascript - 如何使用多个观察者过滤 VueJS 中的列表

javascript - Electron worker : Hidden BrowserWindow causes front to lag

javascript - Bootstrap Modal 包含文本框弹出不起作用

javascript - 带滚动的圆形 slider (jquery+css3)

node.js - 如何同步 couchdb View ?