feat: 增加监听store change的功能$watchStoreChange

Author: landn172

README.md

@@ -1,8 +1,6 @@
-
-
 # jgb-store
 
-jgb数据流插件。用于多页面、多组件数据同步更新。
+jgb 数据流插件。用于多页面、多组件数据同步更新。
 
 ## 使用
 
@@ -17,20 +15,20 @@ import { init } from 'jgb-store';
 init();
 ```
 
-### 定义store
+### 定义 store
 
 ```ts
 // store.ts
 import { createStore } from 'jgb-store';
 
-export const store =  createStore({
+export const store = createStore({
   data: {
     testStore: 1
   }
 });
 ```
 
-### 页面使用store
+### 页面使用 store
 
 ```ts
 // pages/index.ts
@@ -52,40 +50,40 @@ JPage({
 });
 ```
 
-
-
 ### 扩展参数说明
 
 #### Page or Component
 
-* `$useAll`
+- `$useAll`
 
 判断是否全部使用`store.data`及 `app.globalStore.data`
 
 **默认只有在`data`中定义的同名数据才会赋值**
 
-* `$store`
+- `$store`
 
 使用定义的`store`数据
 
-
-
 #### App
 
-* globalStore
+- globalStore
 
 全局`store`, 当时用`$useAll`时会更新此数据
 
 ### 扩展属性说明
 
-* `$store` - `InnerStore`
+- `$store` - `InnerStore`
 
 对`$store`参数的实例化
 
-* `$update`
+- `$update`
 
 更新`store`数据变化，使用`diff`更新
 
+- `$watchStoreChange`
+
+监听当前页面或组件`store`数据变化
+
 ## 感谢
 
-[westore](https://github.com/Tencent/westore)
+[westore](https://github.com/Tencent/westore)

example/src/component/index.ts

@@ -7,6 +7,9 @@ JComponent({
   data: {},
   attached() {
     console.log(this.data);
+    this.$watchStoreChange(() => {
+      console.log('component: watchStoreChange');
+    });
   },
   methods: {
     onTap() {

example/src/pages/index/index.ts

@@ -9,6 +9,9 @@ JPage({
   },
   onLoad() {
     console.log(this.data);
+    this.$watchStoreChange((diff: any) => {
+      console.log('diff', diff);
+    });
   },
   onTap() {
     this.$store.data.storeData = 'page';

example/src/store/index.ts

@@ -6,9 +6,6 @@ const data = {
 
 export const store = createStore({
   data,
-  onChange(diff, ctx) {
-    console.log('diff =>', ctx);
-  },
   updateStore() {
     this.$update();
   }

src/create.ts

@@ -40,6 +40,9 @@ export function create(
       defineReadOnly(this, '$store', store);
       defineReadOnly(this, '$update', storeUpdate);
       defineReadOnly(this, '$useAll', !!opts.$useAll);
+      defineReadOnly(this, '$watchStoreChange', function(this: any, cb: any) {
+        store.onChange(cb, this);
+      });
 
       store.addInstance(this);
       globalStore.update = this.$update;
@@ -59,23 +62,25 @@ export function create(
   }
 
   if (type === 'Component') {
+    hook(opts, 'created', function(this: IPageExtenstion) {
+      defineReadOnly(this, '$store', store);
+      defineReadOnly(this, '$update', storeUpdate);
+      defineReadOnly(this, '$useAll', !!opts.$useAll);
+      defineReadOnly(this, '$watchStoreChange', function(this: any, cb: any) {
+        store.onChange(cb, this);
+      });
+    });
     // Component.attached ->  Page.onLoad -> Component.ready
-    // 要在ready注册
+    // 获取当前页面路径要在ready注册
     hook(opts, 'ready', function(this: IPageExtenstion) {
       const curPage: IPageExtenstion = getPage() as any;
       // @ts-ignore
       this[page] = curPage;
-      if (curPage.$store) {
-        this.globalStore = curPage.globalStore;
-        defineReadOnly(this, '$store', store);
-        defineReadOnly(this, '$update', storeUpdate);
-        defineReadOnly(this, '$useAll', !!opts.$useAll);
-
-        this.route = curPage.route;
-        store.addInstance(this);
-        getInitState($store.data, opts.data, opts.$useAll);
-        this.setData(opts.data);
-      }
+      this.globalStore = curPage.globalStore;
+      this.route = curPage.route;
+      store.addInstance(this);
+      getInitState($store.data, opts.data, opts.$useAll);
+      this.setData(opts.data);
     });
 
     hook(opts, 'detached', function(this: IPageExtenstion) {

src/store.ts

@@ -21,19 +21,18 @@ interface Data<D extends DataOption> {
    * `data`
    */
   data: D;
-
-  /**
-   * 监听数据变化，返回diff内容
-   * @param ctx Page or Component 的context
-   */
-  onChange?: (diff: IAnyObject, ctx: any) => void;
 }
 
 type Options<
   TData extends DataOption,
   TCustom extends CustomOption
 > = (TCustom & Partial<Data<TData>>) & ThisType<Instance<TData, TCustom>>;
 
+/**
+ * store change callback
+ */
+type IDiffCallback = (diff: IAnyObject) => void;
+
 /**
  * 创建store
  * */
@@ -46,6 +45,7 @@ export function createStore<
 
 export class InnerStore {
   data: IAnyObject;
+  private cbs = [] as { cb: IDiffCallback; ctx: any }[];
 
   constructor(private $store: any) {
     this.data = $store.data || {};
@@ -74,8 +74,10 @@ export class InnerStore {
       }
       promiseArr.push(
         setState(vm, obj).then(diff => {
-          if (Object.keys(diff).length && this.$store.onChange) {
-            this.$store.onChange(diff, vm);
+          if (!diff || Object.keys(diff).length === 0) return;
+          const cbs = this.cbs.filter(({ ctx }) => ctx === vm);
+          for (const { ctx, cb } of cbs) {
+            cb.call(ctx, diff);
           }
         })
       );
@@ -87,6 +89,16 @@ export class InnerStore {
     return innerInstances.get(this.$store) || {};
   }
 
+  /**
+   * 绑定store change回调
+   */
+  onChange(cb: IDiffCallback, ctx: any) {
+    if (typeof cb !== 'function')
+      throw new Error(`onChange callback should be a Function`);
+
+    this.cbs.push({ cb, ctx });
+  }
+
   /**
    * 添加当前页面/组件实例
    */
@@ -112,7 +124,7 @@ export function getGlobalStore(): IAnyObject {
   return getApp().globalStore || {};
 }
 
-const newState = Symbol()
+const newState = Symbol();
 
 /**
  * 设置数据

types/extension.d.ts

@@ -33,6 +33,10 @@ interface IStoreExtensionInstance {
    * @returns Promise<diff> 返回差异
    */
   $update: IStoreUpdate;
+  /**
+   * 监听store变化
+   */
+  $watchStoreChange(diff: IAnyObject): void;
 }
 
 declare module 'jgb-weapp/types/JComponent' {