@ssv-labAnim Computed 计算属性
原生小程序并未支持 computed，Anim 集成了官方维护的 miniprogram-computed 提供更多的能力支持，使用起来也非常简单。
能力接入
Anim 支持两种构造器对 computed 能力的接入。
页面接入
js
// /pages/index/index.js
import Anim from '@ssv-lab/anim';
Anim.Page({
data: {
dataCount: 1,
},
computed: {
computedCount(data) {
return 2 * data.dataCount;
},
},
updateCount() {
this.setData({
dataCount: this.data.dataCount + 1,
});
},
});
html
<!-- /pages/index/index.wxml -->
<view>
<view>Count: {{dataCount}}</view>
<view>ComputedCount: {{computedCount}}</view>
<view><button bindtap="updateCount">+1</button></view>
</view>
组件接入
js
// /components/A/A.js
import Anim from '@ssv-lab/anim';
Anim.Component({
data: {
dataCount: 1,
},
computed: {
computedCount(data) {
return 2 * data.dataCount;
},
},
methods: {
updateCount() {
this.setData({
dataCount: this.data.dataCount + 1,
});
},
},
});
html
<!-- /components/A/A.wxml -->
<view>
<view>Count: {{dataCount}}</view>
<view>ComputedCount: {{computedCount}}</view>
<view><button bindtap="updateCount">+1</button></view>
</view>
从上面的接入示例可以看到，computed 并不会直接访问到 this，数据的来源都从 computed 函数的第一个参数获取。如果有访问 this 的需求，需要改成 watch 的方式进行使用。
Computed 与 Store 的使用
如果我们使用了 Anim Store 的能力，Anim 仍然可以支持 computed 中使用 Store 的数据。
js
// /pages/index/index.js
import Anim from '@ssv-lab/anim';
import countStore from '../../store/countStore';
Anim.Page({
data: {
dataCount: 1,
},
store: {
counter: countStore,
},
computed: {
computedCount(data) {
return 2 * data.dataCount;
},
computedStoreCount(data) {
return data.computedCount + data.counter.count;
},
},
updateCount() {
this.setData({
dataCount: this.data.dataCount + 1,
});
},
});
html
<!-- /pages/index/index.wxml -->
<view>
<view>Count: {{dataCount}}</view>
<view>ComputedCount: {{computedCount}}</view>
<view>computedStoreCount: {{computedStoreCount}}</view>
<view><button bindtap="updateCount">+1</button></view>
</view>
关于更多关于 Store 的使用，请参照 Anim Store 一栏。