【實現方法2】50行代碼實現小程序狀態管理，及其監聽

 0、前言

 

如下代碼寫在.ts文件裏面，其實改爲 .js 同樣能運行。請淡定。 

 

一、監聽 

// 這個是「監聽」的用法


// 全部除了app.js之外的文件
//如 xxx.component.js 或 xxx.page.js

const app = getApp( );
app.watch$('Auth.names.Ben', ( newVal, oldVal ) => { //..... })

 

二、Store結構

 

  

 

 

 

 三、最後一步（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( ) {

    },
});

 

四、測試