未检测到电子和 vuejs 更改答案

【问题标题】：Electron and vuejs changes are not detected未检测到电子和 vuejs 更改
【发布时间】：2018-04-14 11:30:35
【问题描述】：

我对 Electron 和 vuejs 有疑问。

我正在节点应用程序中对一个对象进行处理，但 vuejs 没有检测到变量的变化。（我必须刷新页面才能显示新消息。）

我尝试将变量放在 global 和 mainWindows 中，但无事可做。

我的问题有解决方案吗？

如何快速重现： npm init & npm install --save electron & mkdir pages

创建./index.js:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow()
{
    mainWindow = new BrowserWindow({
        width: 800, height: 800, backgroundColor: '#ffffff'
    });

    //Stock data in window
    mainWindow.infos = {
        foo: 'HelloFromMainWindows'
    }

    //Stock data in global
    global.infos = {
        foo: 'HelloFromGLobal'
    }

    //Ez Way to load url
    mainWindow.LoadPage = function (name)
    {
        this.loadURL(url.format({
            pathname: path.join(__dirname, '/pages/' + name),
            protocol: 'file:',
            slashes: true
        }));
    };
    mainWindow.LoadPage('index.html');
    mainWindow.on('closed', function ()
    {    
        mainWindow = null;
    });
}
app.on('ready', createWindow);
app.on('window-all-closed', function ()
{
    if (process.platform !== 'darwin')
        app.quit();
});
app.on('activate', function ()
{
    if (mainWindow === null)
        createWindow();
});

创建./pages/index.html:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h2> {{ foo }} </h2>
    </div>
    <script type="text/javascript">
        /*--1.From Html (No Need to Refresh)--*/
        let infos = { foo: 'HelloFromHtml'}

        /*--2.From CurrentWindow (Need Refresh)--*/
        //let { remote } = require('electron');
        //let currentWindow = remote.getCurrentWindow();
        //let infos = currentWindow.infos;

        /*--3.From Global (Need Refresh)--*/   
        //let infos = require('electron').remote.getGlobal('infos');

        //Just the call to vuejs
        let vue = new Vue({
            el: '#app',
            data: infos
        });
    </script>
</body>
</html>

运行： cd .\node_modules\electron\dist\ & .\electron.exe ..\..\..\index.js

只需在 Electon chrome 视图中打开控制台并输入 infos.foo =' helloDetected'; 即可查看 3 个代码块之间的区别。（您只需取消注释我指定的 html 代码部分）。

第一部分： /*--1.From Html (No Need to Refresh)--*/

数据即时刷新

第二部分和第三部分： /*--2.From CurrentWindow (Need Refresh)--*/ & /*--3.From Global (Need Refresh)--*/

数据不会立即刷新
我需要刷新页面才能刷新消息（带CTRL + R）

编辑： 我想我找到了问题所在。当值发生变化时，Electron 添加处理函数和 vuejs 函数。（获取并设置）我不知道这里最干净的解决方案是什么。必须编辑 vuejs 或电子源？

Image Here

infos 是 mainWindow 中的一个电子对象
data是Vue中的一个vuejs对象

【问题讨论】：

无法运行此程序，但请尝试：1）数据应该是一个函数。 data: function () { return { infos: '' } }. Also tr move your new Vue` 到脚本的顶部。如果没有帮助，我可以在今天晚些时候尝试运行它。
对不起，但我不确定我是否理解：/ ...我将这个替换为：mainWindow.infos = { foo: 'HelloFromMainWindows' } 通过这个：mainWindow.infos = () => { return {foo: 'HelloTestFromNewInstance'} } 在我的index.js 中，但仍然无法正常工作......跨度>

标签： javascript node.js vuejs2 electron

【解决方案1】：

我找到了一个从主进程向渲染器进程发送消息的示例，也许这是正确的做法。

https://github.com/electron/electron/blob/master/docs/api/web-contents.md#contentssendchannel-arg1-arg2-

index.js:

// test send event
setTimeout(function() {
    mainWindow.webContents.send('foo', 'whoooooooh!')
}, 2000);

pages/index.html:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h2> {{ foo }} </h2>
    </div>
    <script type="text/javascript">
        let { remote, ipcRenderer } = require('electron');
        let currentWindow = remote.getCurrentWindow();
        // get initial foo
        let infos = currentWindow.infos;

        // listen for foo change
        ipcRenderer.on('foo', (event, message) => {
            vue.foo = message
        })

        //Just the call to vuejs
        let vue = new Vue({
            el: '#app',
            data () {
                return {
                    foo: infos.foo
                }
            }
        });
    </script>
</body>
</html>

【讨论】：

是的，但是每次我修改我的infos.foo 时，此方法都需要调用mainWindow.webContents.send('foo', 'whoooooooh!')。并在渲染过程中复制对象中的所有值......对我来说不是一个好的解决方案：/ sry。 Vuejs 不会覆盖 getter 和 setter，因为属性是 configurable false。我将尝试通过修改它并编辑 vuejs 以在 setter 和 getter 中调用 ipcRenderer. sendSync (' ELECTRON_BROWSER_MEMBER_SET', metaId, member. name, args) 来重新编译电子，看看它是否解决了问题。