基于代理的小程序状态管理的实现

微信小程序的市场在进一步扩大，而其背后的技术社区还在摸索最佳的实用解决方案。在帮助耐克、沃尔玛和一些创业公司开发小程序后，我仍然认为使用小程序的原生框架是一个更高效、更稳定的选择。然而，使用原生框架只是缺少一个好的状态管理库。如果不引入状态管理，我们在模块化、项目结构、单元测试上会有些捉襟见肘。

目前为redux或mobx做一个适配器，应用在小程序上，还是比较稳定的。然而，打包和引入外部库以及如何编写这个适配器总是很麻烦。于是我生成想出了一个想法，为小程序编写一个特殊的状态管理库，使用起来足够简单，可以通过小程序的npm机制进行安装。

目前我用这个开源库开发了两个小的电商程序，既提高了我的开发效率，又保证了程序的性能。因此，我想谈谈这背后的想法，以激励更多的开发人员尝试新的解决方案。

基于代理的状态管理的实现

代理在小程序中得到了很好的支持，没有发现代理不能在任何iPhone或安卓上使用。实际上，基于Proxy的状态管理是订阅监控的模式。一方面，它监视数据的变化，另一方面，它将这些变化传递给订阅的小程序页面。

例如，当用户从其主页进入用户编辑页面，然后更改其用户名并单击保存时，此时应更新用户主页和用户编辑页面上的用户名。这背后的程序逻辑是，更新此行为会触发Proxy通知状态管理库，然后状态管理库负责检查此时仍在页面栈中的所有页面，并更新订阅用户名数据的页面，如下图所示：

第1:部分监控数据变化

监控数据变化实际上就是监控每个商店的属性变化。实现是在每个商店前面增加一层Proxy，用更直观的图片表示：

当观察到存储时，其属性变成代理实例。当属性值为“对象”或“数组”时，其内部值也打包为代理实例，因此无论数据变化有多深，都可以对其进行监控。而在Proxy的背后，Store的属性实际上是由另一组数据(紫色部分)维护的，它不负责监控，它是纯数据，属性的任何变化最后都会应用到这组数据上，它的功能是维护和返回最新的数据。

实施细节：https://github.com/wwayne/minii/blob/master/src/api/observe.js

Part2:页面数据绑定

因为applet的每一页的js都将一个对象传递给该页，这给了我们包装这个对象的机会，从而实现：

进入页面后，将页面保存在页面堆栈中，并将状态管理库中的数据映射到该页面的数据。当页面退出时，从页面堆栈中移除该页面

实现细节：https://github.com/wwayne/minii/blob/master/src/API/maptodata . js

第3部分：页面订阅更新

当监控数据变化时，我们需要依次做两件事。首先，找到存储在页面堆栈中的所有页面，然后根据每个页面订阅的数据检查变化，如果有变化，就通知这些页面，这样它们就可以触发setData来更新页面。

实施细节：https://github.com/wwayne/minii/blob/master/src/core.js

使用状态管理的示例

有了状态管理库，现在我们将实现更新用户信息的操作，如开头所示例的那样。我们的文件路径如下：

stores/user . js page/user edit/index . js index . wxml 1。首先，我们创建一个存储来保存用户信息并监控其更改：

//stores/user . jsimport { observe }从' minii ' class user Store { constructor(){ this . name=' bob ' } changeName(name){ this . name=name } }导出默认observe(新用户Store()，' user') 2。然后在我们的小程序页面上订阅商店信息

//pages/user edit/index . jsimport { MapTodata }来自“minii”导入userStore来自././stores/User ' const connect=maptodata(state=(({ myname : state . User . name }))page(connect({ updatenametogames(){ User store . change name(' James ')})} 3。完成后，现在您可以使用和更新页面中的数据。

//pages/user edit/index . wxmltext { {我的名字} }/text button bind tap=' updatenametogames '最后将名称更新为James/button

因为小程序的大小限制，我希望在代码量方面尽可能的轻和方便。所以目前这个状态管理库并没有太多复杂的功能，打包后小程序占用的体积还不到1kb，也就相当够用了。

我还用它开发了两个小程序。经过一段时间的用户使用，我更有信心这个方案在小程序中是可行的。如果你有什么想法或建议，请告诉我。

https://github.com/wwayne/minii github :项目

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。