JavaScript中不能直接export状态管理容器概念，需先实现store实例或createStore函数再导出：单例适合轻量场景，工厂函数支持多实例，命名导出适用于只读配置。
JavaScript 中不能直接用 export 导出“模块级别的状态管理容器”本身——因为 export 只能导出变量、函数、类或对象等具体值，而“状态管理容器”是一个设计模式概念，需要你先实现它（比如一个可响应的 store），再导出其实例或创建函数。
导出一个单例 Store 实例
适合轻量场景（如小型应用或工具库），整个模块只维护一份状态：
- 在
store.js中定义并初始化 store 对象（例如用Object.defineProperty或Proxy实现响应式，或直接用普通对象 + 手动通知） - 用
export default导出该实例，确保所有导入处共享同一份状态
示例：
// store.js
let state = { count: 0, name: 'App' };
const listeners = [];
export const subscribe = (cb) => {
listeners.push(cb);
return () => listeners.splice(listeners.indexOf(cb), 1);
};
export const setState = (partial) => {
state = { ...state, ...partial };
listeners.forEach(cb => cb(state));
};
export const getState = () => ({ ...state });
// 导出默认的 store 实例（模块级单例）
export default {
getState,
setState,
subscribe
};
其他文件导入时：import store from './store.js'，所有地方用的都是同一个对象。
立即学习“Java免费学习笔记（深入）”；
导出 createStore 工厂函数
适合需要多个独立 store 实例的场景（如组件沙箱、测试隔离、多实例 widget）：
- 不直接导出实例，而是导出一个返回新 store 的函数
- 每次调用
createStore()都生成全新状态和监听器，互不干扰
示例：
// createStore.js
export function createStore(initialState = {}) {
let state = { ...initialState };
const listeners = [];
const subscribe = (cb) => {
listeners.push(cb);
return () => listeners.splice(listeners.indexOf(cb), 1);
};
const setState = (partial) => {
state = { ...state, ...partial };
listeners.forEach(cb => cb(state));
};
const getState = () => ({ ...state });
return { getState, setState, subscribe };
}
使用：import { createStore } from './createStore.js'; const store1 = createStore({ id: 1 }); const store2 = createStore({ id: 2 });
配合 ES 模块静态导出做“命名状态”
如果状态结构固定、无需动态更新逻辑，可用纯对象 + 命名导出，适合配置型或只读状态：
- 用
export const xxx = ...导出不可变字段 - 搭配
export let（谨慎）可支持简单可变状态，但无响应能力
示例：
// configStore.js
export const API_BASE = 'https://api.example.com';
export const IS_DEV = import.meta.env?.DEV ?? false;
// ⚠️ 可变但无通知机制，仅适用于极简同步更新
export let theme = 'light';
export const setTheme = (t) => { theme = t; };
注意事项
- ES 模块是静态编译的，
export不支持运行时动态增删属性；想动态管理状态请封装在函数/类内部 - 若需响应式（如自动更新 UI），必须自行实现监听机制（
subscribe）、或结合 Signal（import { signal } from '@preact/signals'）等现代方案 - 避免在导出对象上直接赋值（如
export default { count: 0 }后又改store.count = 5），这不会触发任何响应，且破坏模块封装性
