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',所有地方用的都是同一个对象。
导出 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),这不会触发任何响应,且破坏模块封装性
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











