数据流转

先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题:

非纯组件的话，可以直接省去 triggerEvent 的过程，直接修改 store.data 并且 update，形成缩减版单向数据流。

Github: https://github.com/dntzhang/westore

组件

这里说的组件便是自定义组件，使用原生小程序的开发格式如下:

 Component({   properties: { },    data: { },    methods: { } })

使用 Westore 之后:

import create from '../../utils/create'  create({   properties: { },    data: { },    methods: { } })

看着差别不大，但是区别：

• Component 的方式使用 setData 更新视图
• create 的方式直接更改 store.data 然后调用 update
• create 的方式可以使用函数属性，Component 不可以，如：

export default {   data: {     firstName: 'dnt',     lastName: 'zhang',     fullName:function(){       return this.firstName + this.lastName     }   } }

绑定到视图:

<view>{{fullName}}</view>

小程序 setData 的痛点:

• 使用 this.data 可以获取内部数据和属性值，但不要直接修改它们，应使用 setData 修改
• setData 编程体验不好，很多场景直接赋值更加直观方便
• setData 卡卡卡慢慢慢，JsCore 和 Webview 数据对象来回传浪费计算资源和内存资源
• 组件间通讯或跨页通讯会把程序搞得乱七八糟，变得极难维护和扩展

没使用 westore 的时候经常可以看到这样的代码:

使用完 westore 之后:

上面两种方式也可以混合使用。

可以看到，westore 不仅支持直接赋值，而且 this.update 兼容了 this.setData 的语法，但性能大大优于 this.setData，再举个例子：

this.store.data.motto = 'Hello Westore' this.store.data.b.arr.push({ name: 'ccc' }) this.update()

等同于

                    

                        
关键字：