将电子存储与反应一起使用答案

【问题标题】：Using electron-store with react将电子存储与反应一起使用
【发布时间】：2021-10-22 16:10:33
【问题描述】：

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

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

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();
    }
});

我一直在寻找解决方案 [ast 几个小时，但没有找到任何东西。任何帮助表示赞赏。

【问题讨论】：

标签： reactjs electron electron-forge

【解决方案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
    )

工作得很好！

【讨论】：