Electron开发中如何在组件间共享实时更新的变量？

这是原生JS组件开发中很常见的状态共享问题——要让选择组件的选中值实时同步到展示组件，核心是要建立组件间的状态通信机制，下面给你两种实用的实现方案：

方案一：集中式状态管理（推荐，适合组件较多的场景） #

我们可以创建一个全局的状态管理器，统一管理共享状态，所有依赖这个状态的组件都从这里获取数据，并且状态更新时自动通知组件重新渲染。

1. 创建状态管理器模块 #

// stateManager.js
// 共享状态
const state = {
  selectedCurrency: 'USD' // 设置默认值
};

// 存储订阅状态变化的回调函数
const subscribers = [];

// 更新状态并通知所有订阅者
function setState(newState) {
  Object.assign(state, newState);
  notifySubscribers();
}

// 添加订阅者（组件的渲染函数）
function subscribe(callback) {
  subscribers.push(callback);
}

// 通知所有订阅者重新渲染
function notifySubscribers() {
  subscribers.forEach(callback => callback(state));
}

// 导出方法供组件调用
export { state, setState, subscribe };

2. 修改选择组件：更新全局状态 #

import { setState } from './stateManager.js';

const inp = document.querySelector("#selects");
inp.addEventListener("change", (event) => {
  const selectedValue = event.target.value;
  console.log(selectedValue);
  // 调用状态管理器的方法更新共享状态
  setState({ selectedCurrency: selectedValue });
});

3. 修改展示组件：依赖全局状态并订阅更新 #

import { state, subscribe } from './stateManager.js';

// 渲染展示组件的函数
function renderDisplay() {
  const displayTemplate = `
    <header>
      <h1>
        <a href="#/posts">${state.selectedCurrency}'s Blog</a>
      </h1>
    </header>
  `;
  // 假设展示组件挂载到id为display-container的DOM节点上
  document.getElementById('display-container').innerHTML = displayTemplate;
}

// 初始渲染一次
renderDisplay();

// 订阅状态变化，状态更新时自动重新渲染
subscribe(renderDisplay);

方案二：自定义事件通信（适合简单的两个组件通信） #

如果只是两个组件之间的简单通信，可以用原生JS的自定义事件机制——选择组件触发事件传递值，展示组件监听事件并更新自身内容。

1. 修改选择组件：触发自定义事件 #

const inp = document.querySelector("#selects");
inp.addEventListener("change", (event) => {
  const selectedValue = event.target.value;
  console.log(selectedValue);
  // 触发全局自定义事件，把选中值通过detail传递
  document.dispatchEvent(new CustomEvent('currencyChanged', {
    detail: selectedValue
  }));
});

2. 修改展示组件：监听事件并更新 #

// 初始化默认值
let currentCurrency = 'USD';

// 渲染函数
function renderDisplay() {
  const displayTemplate = `
    <header>
      <h1>
        <a href="#/posts">${currentCurrency}'s Blog</a>
      </h1>
    </header>
  `;
  document.getElementById('display-container').innerHTML = displayTemplate;
}

// 初始渲染
renderDisplay();

// 监听自定义事件，更新值并重新渲染
document.addEventListener('currencyChanged', (event) => {
  currentCurrency = event.detail;
  renderDisplay();
});

为什么你的原有代码无法实现？ #

你原来的选择组件里的value是局部变量，展示组件根本无法访问到它；而且就算能访问，也没有任何机制监听这个值的变化，所以当选择值改变时，展示组件不会自动更新。上面的两种方案都解决了这两个问题：要么通过共享状态让组件拿到同一数据源，要么通过事件传递实现状态通知。

内容的提问来源于stack exchange，提问作者scripter2021