Flutter开发App的未来及其在各行业的应用潜力分析
466
2023-11-12
在本文开始前请大家先想想在微信小程序中如果要做到全局状态共享有几种实现方式?
在这里给大家列举几种目前已知的方式:
globalData
本地缓存
mobx-miniprogram
westore
globalData和缓存应该是大家比较熟悉的,但这二者会随着项目的不断迭代逐渐变的混乱和不易维护。
所以针对此种情况mobx-miniprogram和westore应运而生。因前段时间公司项目刚好用到了mobx-miniprogram,所以借着公司的业务场景本文就展开讲一讲mobx-miniprogram,看看mobx-miniprogram是如何实现的小程序的全局状态管理。
如理解有误,欢迎评论纠正~
mobx-miniprogram 的功能其实非常纯粹与简单,就是创建一个 store。但将 store 的数据映射到页面或组件时,就需要 mobx-miniprogram-bindings 库,它类似 react-redux,用于连接 store 与页面/组件的桥梁。
官方代码片段:代码片段
微信开发者工具---> 工具---> 构建npm
新建一个js文件,这里我们以购物车为例。
我们需全局共享购物车内的商品的状态、数量,做到一处修改全局变化。
从 mobx-miniprogram 包中导入 observable 和 action 两个方法。
observable: 用于创建 store 的实例对象action: 用于包裹修改 store 数据的函数store的应用,在page和component中是两种不同的方式
page
在page页面使用,我们需要用到 mobx-miniprogram-bindings 用于连接 store 与page页面
createStoreBindings 方法调用会返回一个包含 updateStoreBindings,destroyStoreBindings 两个函数的对象,并且赋值给了当前页面实例的 storeBindings 属性。
所以,当页面卸载(onUnload)时,调用 destroyStoreBindings 销毁当前页面的 store 绑定,避免造成内存泄露
在组件中使用、更新 store
与在页面使用 store 方式不同,在组件中要结合 behaviors(类似 Vue 中的混入)方式。
从 mobx-miniprogram-bindings 包中导入 storeBindingsBehavior 方法,并在组件选项中定义 storeBindings 字段。
也可以把 storeBindings 设置为一个数组,这样可以同时绑定多个 store
为了提升性能,在 store 中的字段被更新后,并不会立刻同步更新到 this.data 上,而是等到下个 wx.nextTick 调用时才更新。 这样可以显著减少 setData 的调用次数。
如果需要立刻更新,可以调用:
this.updateStoreBindings() 在组件中this.storeBindings.updateStoreBindings() 在页面中随着项目越大,功能越丰富,项目模块的状态也越多,为了防止在一个 store 中堆积其他模块的状态,可根据功能模块或职责划分多个 store。
比如在 store 目录下划分以下模块:
userStore.jscartStore.jsorderStore.js页面或组件中需要使用和更新哪些 store 模块的状态,就导入指定的 store 模块,作为 store 字段传递给 createStoreBindings 或 storeBindingsBehavior 即可。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~