Question

我对Electron和vuejs有疑问。

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

我试图将变量放在global和mainWindows中，但无所事事。

我的问题有解决方法吗？

如何重现： npm init＆amp; npm install --save electron＆amp; 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\＆amp;运行.\electron.exe ..\..\..\index.js

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

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

数据立即刷新

对于第二和第三部分： /*--2.From CurrentWindow (Need Refresh)--*/＆amp; /*--3.From Global (Need Refresh)--*/

数据 NOT 立即刷新
我需要刷新页面以刷新消息（使用CTRL + R）

修改： 我想我发现了这个问题。电子添加功能可在值发生变化时处理，也可用于vuejs。（获取和设置）我不知道这里最干净的解决方案是什么。必须编辑vuejs或电子源吗？

Image Here

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

Answer 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>

未检测到电子和vuejs变化

1 个答案: