【实现方法2】50行代码实现小程序状态管理,及其监听
时间:2019-03-14 18:05:26
收藏:0
阅读:304
0、前言
以下代码写在.ts文件里面,其实改成 .js 一样能运行。请淡定。
1、监听
// 这个是“监听”的用法
// 所有除了app.js以外的文件 //如 xxx.component.js 或 xxx.page.js const app = getApp( ); app.watch$(‘Auth.names.Ben‘, ( newVal, oldVal ) => { //..... })
2、Store结构



3、最后一步(app.ts)
import { store$ } from ‘./store/index‘;
App({
watchCallBack: { },
/** 全局store */
store: store$,
/** ! 不能引用,引用请使用 app.store ( 用于记录旧数据 ) */
store$: JSON.parse( JSON.stringify( store$ )),
/**
* @description
* 监听store里面某字段
* 用法:
* const app = getApp( );
* app.watch$(‘Auth.names.Ben‘, ( newVal, oldVal ) => { ..... })
*/
watch$( key, cb ) {
this.watchCallBack = Object.assign({ }, this.watchCallBack, {
[ key ]: this.watchCallBack[ key ] || [ ]
});
this.watchCallBack[ key ].push( cb );
const getValue = ( key: string, obj: Object ) => {
return key.split(‘.‘).reduce(( x, y ) => ( x as any )[ y ], obj );
};
const oldVal = getValue( key, this.store$ );
const newVal = getValue( key, this.store );
cb( oldVal, newVal );
},
/**
* @description
* 设置store里面某字段
* 用法:
* const app = getApp( );
* app.set$(‘Auth.names.Ben‘, ‘hehehe‘);
*/
set$( key, val ) {
console.log( ‘【---- Global Set ----】‘, key, ‘: ‘, val );
const storeNamespace = key.split(‘.‘)[ 0 ];
const deepKeys = key.split(‘.‘).splice( 1 ).join(‘.‘);
const targetKey = key.split(‘.‘)[ key.split(‘.‘).length - 1 ];
const beforeTargetKeys = key.split(‘.‘).slice( 0, key.split(‘.‘).length - 1 ).join(‘.‘);
// 拿到旧值
const oldVal = deepKeys.split(‘.‘).reduce(( x, y ) => ( x as any )[ y ], ( this.store$ as any)[ storeNamespace ]);
// 更新新值 ( store、store$ )
[ this.store, this.store$ ].map( obj => {
const target = beforeTargetKeys.split(‘.‘).reduce(( x, y ) => ( x as any)[ y ], obj );
target[ targetKey ] = val;
});
// 触发回调
if ( Array.isArray( this.watchCallBack[ key ])) {
this.watchCallBack[ key ].map(func => func( val, oldVal ));
}
},
onLaunch( ) {
},
});
4、测试


评论(0)