使用 electron-store 和 react

Question

所以我一直在摆弄电子并做出反应来创建一个应用程序，并且我一直在寻找一种存储数据的方法。不像很多数据，只是我需要的一些东西。

我发现电子商店非常适合我的需要。在反应文件中导入商店后，我不断收到错误消息：

TypeError: fs.existsSync is not a function
getElectronPath

这是我的 jsx 文件：

import React, { useState } from 'react';
import { Box, Grid, Typography, Button } from '@material-ui/core';
import TeamSelect from './teamSelect';
import Store from 'electron-store';

export default function Settings() {
    const [teams, setTeams] = useState({});
    const store = new Store();

    const saveToStorage = (e, number) => {
        if (e) {
            setTeams({
                ...teams,
                [number]: {
                    ...teams[number],
                    [e.type]: e.value,
                },
            });
        } else {
            store.set('teams', teams);
        }
    };

    return (
        //a lot of data here
    );
}

和我的electron.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Store = require('electron-store');

const store = new Store();
const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 768,
        webPreferences: {
            nodeIntegration: true,
            enableRemoteModule: false,
            contextIsolation: false,
            nodeIntegrationInWorker: false,
            nodeIntegrationInSubFrames: false,
        },
    });
    mainWindow.loadURL(
        isDev
            ? 'http://localhost:3000'
            : `file://${path.join(__dirname, '../build/index.html')}`,
    );
    mainWindow.on('closed', () => (mainWindow = null));
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

我[过去几个小时一直在寻找解决方案，但没有找到任何东西。感谢您的帮助。

Answer 1

所以我通过使用 ipcMain 和 ipcRenderer.

解决了这个问题

编辑 electron.js 文件如下：

//Changed the imports
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Store = require('electron-store');

//defined the store
let store = new Store();

// ... rest of code here

//added a listener at the end of file with a log to see what's happening
console.log('store', store.get('test'));

//Listener for data coming from JSX
ipcMain.on('asynchronous-message', (event, arg) => {
    console.log('heyyyy', arg); // prints "heyyyy ping"

//Save them to the store
    store.set('test', arg);

    console.log('store', store.get('test'));
});

之后我编辑了我的 jsx 文件：

import React, { useState } from 'react';
import { Box, Grid, Typography, Button } from '@material-ui/core';
import TeamSelect from './teamSelect';
import 'fs';
const { ipcRenderer } = window.require('electron');

export default function Settings() {
    const [teams, setTeams] = useState({});

    const saveToStorage = (e, number) => {
        if (e) {
            setTeams({
                ...teams,
                [number]: {
                    ...teams[number],
                    [e.type]: e.value,
                },
            });
        } else {
        // send the data i want to send as a string
        ipcRenderer.send('asynchronous-message', JSON.stringify(teams));
        }
    };
    // 
    return ( 
    // Return data here
    )

工作得很好！

使用 electron-store 和 react

Using electron-store with react

reactjs

electron

electron-forge