ES6模块化通过单例导出实现安全的集中式状态管理。导出唯一实例（如store），各模块导入后操作同一内存对象，天然同步；配合分层封装与方法约束，可零依赖满足中小型应用需求。
ES6 模块化本身不提供“全局状态”，但它的单例特性 + 显式导出/导入，天然适合构建集中式状态管理。关键不是让状态“全局可见”，而是让所有模块引用同一个实例——这才是现代前端中安全、可维护的“全局状态”实践方式。
用 ES6 模块导出一个单例状态管理器
把状态管理逻辑封装成一个类或对象，然后在模块文件中只导出一个实例（不是类，不是工厂函数）：
- 创建 state.js 文件：
// state.js
class StateManager {
constructor() {
this.data = {
user: null,
theme: 'light',
isLoading: false
};
}
get(key) { return this.data[key]; }
set(key, value) { this.data[key] = value; }
update(updates) { Object.assign(this.data, updates); }
}
// ✅ 关键：直接导出唯一实例
export const store = new StateManager();
任何地方 import 这个 store，拿到的都是同一份内存中的对象 —— ES6 模块保证了这一点。
在组件或业务逻辑中统一使用该实例
不需要 new、不需要反复初始化，只需导入并使用：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- login.js：
import { store } from './state.js';
function handleLogin(user) {
store.set('user', user);
store.set('isLoading', false);
}
- themeToggle.js：
import { store } from './state.js';
function toggleTheme() {
const current = store.get('theme');
store.set('theme', current === 'light' ? 'dark' : 'light');
}
所有模块操作的都是同一个 store.data，无需事件总线或发布订阅，天然同步。
配合模块化分层，保持职责清晰
状态管理应与业务逻辑解耦，建议按功能组织：
- src/store/index.js：导出主 store 实例（如上）
-
src/store/user.js：封装用户相关操作（如 login/logout），内部仍用
import { store } - src/store/notifications.js：独立管理提示状态，同样复用同一 store 实例
这样既共享状态，又避免逻辑混杂；每个子模块专注自身职责，store 只负责数据存取。
注意边界：不等于“任意访问”，而要主动约束
ES6 模块的单例机制是技术基础，但真正可靠的状态管理还需设计约束：
- 避免直接修改
store.data.xxx = ...，统一走set()或update()方法 - 如需响应式（比如自动刷新 UI），可在
set()内部触发自定义事件或调用回调，而不是依赖框架 - 服务端渲染（SSR）场景下，注意 store 实例不能跨请求复用，需为每次请求新建（通常由框架如 Next.js 处理）
本质上，这是轻量级、零依赖的集中状态方案 —— 不需要 Redux 或 Context，却已满足多数中小型应用的核心需求。
