1.2.5 • Published 1 year ago
acttree
简要说明
acttree（操作树）是一个用于实现撤销重做功能的状态存储工具
特点
- 基于操作记录:
state（状态数据）只有一个，它只是把每一次执行的action（操作）记录起来，便于状态的还原与重现 - 多支路重做: 大部分撤销重做工具的记录结构都是线性的，而它是树状的，能重现多个状态
- 安全撤销: 可以选择手动编写每一种操作的撤销方式，也可以省略，交给代理去完成
- 类型安全: 由
typescript语言实现类型约束与推断
适用场景
具有MV架构的程序，如使用Vue搭建的应用
参考文档
工具函数
| 函数名 | 描述 | 参数 |
|---|
| createStore | 创建一个状态存储实例 | options 配置对象 |
| createModule | 创建一个模块 | parentModule 父模块，必须有父模块才能创建 name 模块名 options 配置对象 |
配置对象options
| 属性名 | 说明 | 示例 |
|---|
| tierLimit | 可撤销层数限制，运行时超出会舍弃最旧结点，小于1则不生效 | - |
| parallLimit | 可重做的纵向层数，运行时超出会舍弃最旧子树，小于1则不生效 | - |
| state | 状态数据源，可以是一个对象，或返回数据源的函数，如果有参数，第一个参数是父模块的数据源 | { state: { table: 1, 2, 3 }} |
| getters | 视图集合，成员为返回部分数据的函数 | { getters: { table(state) { return state.table } }} |
| actions | 操作集合，成员为必须含有do方法的对象，undo方法可选 | { actions: { add: { do(state, item) { state.table.push(item) } } }} |
| modules | 模块集合，成员为子模块的配置对象 | { modules: { state: (state) => { return state.table }, actions: { add: { do(state, item) { state.push(item) } } } }} |
状态存储示例ActModule、ActTree
| 属性名 | 类型 | 说明 |
|---|
| parentModule | ActModule | 父模块 |
| tierLimit | number | 撤销层数限制 |
| parallLimit | number | 重做纵向层数限制 |
| getters | object | 视图集合，从外部可以通过该属性来获取状态数据 |
| 方法名 | 参数 | 说明 |
|---|
| nowTier | - | 返回当前状态的结点层级 |
| undoable | - | 当前状态是否还能撤销 |
| redoLength | - | 返回当前状态的可重做分支数 |
| isFull | - | 返回当前结点树是否已满 |
| isEmpty | - | 返回当前结点树是否为空 |
| recover | tier | 将数据撤销到第tier层 |
| emptying | - | 清空当前状态之前的结点 |
| addListener | type，listener | 添加事件监听器 |
| removeListener | type，listener | 移除事件监听器 |
| createModules | options | 创建一个或多个子模块 |
| getModule | modulePath | 根据路径modulePath获取某个后代模块 |
| do | actionKey，args | 将args作为执行参数，执行名为actionKey的操作 |
| undo | - | 撤销一次 |
| redo | index | 从index分支重做一次 |