le5le-store 前端 Cookie 和全局内存存储库

Question

le5le-store是前端cookie和全局内存存储库，用于全局变量存储和跨组件通信。

为什么不用 redux 之类的

• 轻量 - 不到100行，没有性能问题
• 使用简单 - 几乎0学习成本
• 订阅式 - 非入侵式，少即是多

不足：

• 数据全局共享 - 没有单向数据流功能，可以和其他库一起使用。其实看个人习惯，我对单向数据流不感冒。
• 没有数据快照。个人认为如果需要，做好单一职责和单元测试。

理念

• 少即是多
• 不应该过渡使用全局数据；除了需要，普通数据都应该是局部数据，用完就释放
• 虽然没有单向数据流和数据快照，但未来实现一个深度拷贝的历史快照，也不无可能。

快速入门

Store

import { Store } from 'le5le-store';

Store.set('name', 'topology');
Store.get('name');

// 实时监听变化
const subcribe = Store.subcribe('name', value => {
  console.log('name:', value);
});
// 取消订阅（监听）
subcribe.unsubcribe();


Store.set('obj', { str: 'abc', num: 1, arr: ['aaa', 111], children: { key: 123 } });
Store.get('obj.num'); // == 1

Store.get('obj').num = 100;
// 通知obj.num发生变化，触发订阅回调函数
Store.updated('obj.num');

Cookie

Cookie.set('token', 'secret', {path: '/'});
Cookie.get('token');
Cookie.delete('token');

使用方法

cookie

// 参数： key, name, options
Cookie.set('token', 'secret', {path: '/'});

Cookie.get('token');
Cookie.delete('token');

store

全局共享

import { Store } from 'le5le-store';

Store.set('name', 'topology');
Store.get('name');

// 实时监听变化
const subscribe = Store.subscribe('name', value => {
  console.log('name:', value);
});
// 取消订阅（监听）
subcribe.unsubscribe();


Store.set('obj', { str: 'abc', num: 1, arr: ['aaa', 111], children: { key: 123 } });
Store.get('obj.num'); // == 1

Store.get('obj').num = 100;
// 通知obj.num发生变化，触发订阅回调函数
Store.updated('obj.num');

实例化（数据独立隔离）

import { Store } from 'le5le-store';

const store = new Store();
store.set('name', 'topology');
store.get('name');

// 实时监听变化
const subscribe = store.subscribe('name', value => {
  console.log('name:', value);
});
// 取消订阅（监听）
subcribe.unsubscribe();


store.set('obj', { str: 'abc', num: 1, arr: ['aaa', 111], children: { key: 123 } });
store.get('obj.num'); // == 1

store.get('obj').num = 100;
// 通知obj.num发生变化，触发订阅回调函数
store.updated('obj.num');

成员函数列表

以下函数，类的静态函数和new的实例化函数同名

[static] get(key?: string)

获取属性为key的值。例如：

Store.set('name', 'topology');
const name = Store.get('name');
console.log(name);
// The log: 'topology'

const store = new Store();
store.set('name', 'topology');
const name = store.get('name');

[static] set(key: string, value: any)

设置 key=value

[static] subscribe(key: string, fn: (data: any) => void): Observer

订阅（监听）属性为key的值，返回一个订阅者对象。当内容发生变化，将触发回调函数fn。

当不需要订阅的时候，请调用observer.unsubcribe();

[static] updated(key: string)

当使用非set函数修改数据时，调用updated通知订阅者数据发送改变。例如：

Store.get('obj').num = 100;
// 通知obj.num发生变化，触发订阅回调函数
Store.updated('obj.num');

【说明】：

子对象属性会自动触发父属性订阅通知。例如：

Store.set('obj.num', 100);

// 实时监听变化
const subscribe = Store.subscribe('obj', value => {
  console.log('obj:', value);
});
// 取消订阅（监听）
subcribe.unsubscribe();

相关链接

• github 地址：https://github.com/le5le-com/le5le-store