bare-store

bare-store 是一个基于 TypeScript 的轻量级数据共享库，旨在为前端项目提供通用的状态管理能力。

简介

bare-store 是一个轻量级的前端状态管理库，专注于为浏览器环境或插件生态提供跨模块数据共享的能力。它解决了前端插件或模块间状态隔离、通信困难、数据同步复杂的问题。项目仅依赖 bare-emitter 事件库，保持了极简的依赖结构。

功能特性

• 响应式状态存储: 提供类 Store 模式的数据容器，支持监听和响应数据变化
• 细粒度数据项管理: 通过 ReactObj 实现对单个状态字段的封装与变更追踪
• 类型安全: 基于 TypeScript 构建，提供完整的类型定义输出
• 持久化支持: 支持将数据保存到 localStorage
• 绑定功能: 提供单向和双向绑定功能，支持与 DOM 元素的绑定

安装

npm install bare-store

使用示例

import { Store, ReactObj, bind, bindReactObj } from 'bare-store';

// 创建 Store 实例
const store = new Store();

// 添加数据项
store.set('count', 0);
store.set('name', 'World');

// 监听特定项的变化
store.subscribe('count', (newValue, oldValue) => {
  console.log('Count changed from:', oldValue, 'to:', newValue);
});

// 设置值
store.set('count', 5);

// 获取值
const count = store.get('count'); // 返回 5
const name = store.get('name'); // 返回 'World'

// 使用 ReactObj 直接操作
const countObj = new ReactObj(10, 'countStorage', true); // 创建带持久化的ReactObj
console.log(countObj.value); // 获取当前值

// 监听 ReactObj 变化
countObj.on('change', (newValue) => {
  console.log('Count changed to:', newValue);
});
countObj.value = 15; // 设置新值，触发监听器

// 使用绑定功能
const target = { value: 'initial' };
const unbind = bind(countObj, target); // 单向绑定
countObj.value = 'new value'; // target.value 也会被更新

// 双向绑定
const obj1 = new ReactObj('value1');
const obj2 = new ReactObj('value2');
const unbindBoth = bindReactObj(obj1, obj2); // 双向绑定
obj1.value = 'updated'; // obj2.value 也会被更新为 'updated'

API

Store

• constructor(storageKey?): 构造函数，可选择性地传入存储键名
• set(key, value): 设置指定键的值
• get(key): 获取指定键的值
• has(key): 检查是否存在指定键
• remove(key): 移除指定键的值
• keys(): 获取所有键名
• size(): 获取 Store 中项的数量
• clear(): 清空 Store 中的所有项
• forEach(callback): 遍历 Store 中的所有项
• subscribe(key, callback): 订阅特定键的变化
• unsubscribe(key, callback): 取消订阅特定键的变化
• saveToStorage(): 将 Store 中所有数据保存到 localStorage
• loadFromStorage(): 从 localStorage 加载数据并恢复到 Store
• removeFromStorage(): 从 localStorage 中删除整个 Store 的数据
• setStorageKey(key): 设置或更改 localStorage 键名

ReactObj

• value: 获取或设置当前存储的值
• on('change', callback): 监听值变化事件
• triggerChange(): 手动触发 change 事件
• saveToStorage(): 保存到 localStorage
• loadFromStorage(): 从 localStorage 加载值
• removeFromStorage(): 从 localStorage 中删除对应的值
• setKey(key): 设置 localStorage 键名
• setAutoSave(autoSave): 设置是否自动保存到 localStorage
• getAutoSave(): 获取当前自动保存状态
• bind(target): 单向绑定到目标对象
• unbind(target): 解除与目标对象的绑定
• bindReactObj(otherReactObj): 与另一个 ReactObj 双向绑定

工具函数

• bind(reactObj, target): 将目标对象的 value 属性与 ReactObj 单向绑定
• bindReactObj(firstReactObj, secondReactObj): 将两个 ReactObj 实例双向绑定

构建

# 安装依赖
npm install

# 构建项目
npm run build

构建后的文件会输出到 dist 目录。

许可证

MIT