实现方法250行代码实现小程序状态管理,及其监听

Posted BestMe丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现方法250行代码实现小程序状态管理,及其监听相关的知识,希望对你有一定的参考价值。

 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、测试

 

 

 

以上是关于实现方法250行代码实现小程序状态管理,及其监听的主要内容,如果未能解决你的问题,请参考以下文章

微信第三方开放平台代小程序实现业务

250分最高分,请高手解答VB6程序读取网页文本及其链接的方法

分享:50行代码监听watch小程序的globalData

广播小案例-监听系统网络状态 --Android开发

250张png图片实现动画实现方案事件

250张png图片实现动画实现方案事件