Fun State Management Huex框架

图片

引言


我总是对您需要为框架的状态管理执行多少操作感到惊讶-立即描述方案,编写变异,提交它们……为什么不让一切都变得尽可能简单?)

当您无法编写代码时,为什么还要编写代码?

(已更新)
我向您展示我半小时的工艺-Huex

到目前为止,该解决方案仅在NodeJS平台上可用,但我认为对于演示文稿而言已足够。

免责声明:Huex是我为娱乐和教育目的而写的,并不声称它是成熟的框架。 也许它声称。 现在开始吧。

这是为了什么


有一个方便的数据仓库。 能够监视他们的更改。 他将摆脱诸如“ getters”,“ mutators”,“ actions”,“ commit”等难以理解的单词。

如何安装?


到目前为止,仅通过复制存储库即可。
复制存储库后,您需要以以下形式通过项目的package.json连接它:

"dependencies": { "huex": "file:../huex/" } 

之后,它将作为huex模块提供。

或使其更容易,如dpr正确指出的:
npm i -S https://github.com/vssenko/huex.git

如何使用?


尽可能自然和简单。 让我们从代码开始:

 //  huex. const Huex = require('huex'); //  . const storage = Huex(); //     - . storage.on('change:a', (e) => console.log(`Property "a" was changed: ${e.value}`)); //      . storage.a = 5; 

仅此而已。 在我们存储区域的任何更改\设置中,都会创建两个事件: 更改为数据{key,value}和change:更改为数据{value}。
(已更新)
对于嵌套对象和数组,将同时为嵌套对象和父对象创建事件。
足以创建任何复杂的项目。

也许还有别的吗?


当然:您可以随时随地创建深层嵌套的字段,并且不会创建任何异常。

 const Huex = require('huex'); const storage = Huex(); storage.abcde = 5; 

当然,事件处理程序也可以挂在所有嵌套对象上。

(已更新)

也许还有别的吗?


是的 现在,Huex不仅可以处理简单的数据,还可以处理对象和数组,并将它们重新构建为Huex存储库!
  sut.subSut = { a: 5 }; sut.on('change:subSut', (e) => { console.log(e.key); // subSut console.log(e.value.a) // 10 console.log(e.nested); // { key: 'a', value: 10 } }); sut.subSut.a = 10; 


项目测试中提供了更多示例。

有什么收获?


所有这些魔术都是通过Proxy实现的。 这不是最快的解决方案,通常,他们不建议在生产中使用Proxy类。

(更新)

结论


对于两个开发周期(晚上),JS社区有另一个有趣的框架。
Huex可以做什么:
  • 从对象\数组初始化
  • 通过简单分配保存值
  • 将自身更改为对象或数组时触发事件
  • 在旅途中,重做在Huex存储库中写入的对象/数组
  • 更改对象字段或数组字段时触发事件
  • 在旅途中,访问不存在的字段时会生成空存储(有争议的功能,但非常酷)

Huex不知道如何:
  • 快点:-)。 尽管正如Drag13所指出的那样,在Proxy的速度上仍然有进步,但是突然之间这种方法将变得流行。

Source: https://habr.com/ru/post/zh-CN421783/


All Articles