どうやってWeChatウィジェットページ間の通信を難しくしないか？

一つの始まり
プログラム開発者はいつも各ページの間の通信問題に出会います。実現方法も様々です。例えば…
シーンの復元
まず、これは電気商の小さいプログラムです。
このような要求があります。

トップページのあるところにショッピングカートの商品数を展示します。

他のページで商品を追加購入した時、トップページの数が更新されました。

実装
方式一：onShow直接要求インターフェース

Page({
 onShow() {
 // ...    
 
 //            
 this.requestCartNum();
 }
})

不足：毎回onshowはインターフェースを求めて、資源を浪費します。
方式二：global Data保存ショッピングカー数、onshow中に更新する

//   .js
Page({
 onShow() {
  //  globalData        
  let num = globalData.cartNum;
  if (num !== this.data.cartNum) {
   this.setData({
    cartNum: num,
   });
  }
 }
});

//    .js
Page({
 //      globalData  
 cartAdd(num) {
  globalData.cartNum = globalData.cartNum + num;
 }
})

方式3：追加購入後、トップページのインスタンスを取得し、トップページのメソッドを呼び出します。

//   .js
Page({
 onCartAdd(num) {
  this.setData({
   cartNum: this.data.cartNum + num,
  });
 },
});

//    .js
Page({
 onCartAdd(num) {
  //            ，    onCartAdd  
  let pages = getCurrentPages();
  let curPage = pages[0];
  curPage.onCartAdd(num);
 }
})

足りません：トップページの実例を正確に入手できるかどうかは分かりません。他のページに変えると多重化しにくいです。
方法4：イベント購読とリリース

//   .js
Page({
 onLoad() {
  //       
  this.$bus.on('cart_add', (num) => {
   this.setData({
    cartNum: this.data.cartNum + num,
   })
  })
 }
})

//    .js

Page({
 //        cart_add  
 onCartAdd(num) {
  this.$bus.emit('cart_add', num);
 }
})

この方法はイベントシステムで、リリースモードで行う処理を購読します。
上記のいくつかの方法の中で最適な解決策は方法四です。イベントの購読と発表を利用して、論理的に明確で互換性が良いです。しかし、避けられない不足は、買い物の数を動的に表示するページごとに同じ論理コードを追加する必要があります。
状態管理方案
1ページのアプリケーションで最もよく使われるのはコンポーネント間の通信であり、これによって異なる状態の記憶方式が生まれた。react用redux、vue用vuex。彼らの考え方は似ています。すべての管理状態がコアストアに記憶されています。
では、他のフレームでも大丈夫です。プログラムでも大丈夫です。reduxを例にとって、簡単な状態管理方案を実現する。
wxduxの実現
使用前提：redux基礎があります。
wxduxは、reduxと同様に、トリガの挙動をactionで記述し、reducerはstateの変化を記述する。
1.ウィジェットの入り口に登録する
storeを登録してglobalDataに追加します。

import {createStore} from './wxdux/index';
import reducer from './reducer';

const store = createStore(reducer);

App({
 globalData: {
  store,
 },
});

2.reducer実現
書き方はreduxに似ています。機能も似ています。

const userReducer = (state = {}, action) => {
 // ...
}

const postReducer = (state = [], action) => {
 // ...
};

const reducers = {
 user: userReducer,
 posts: postReducer,
};

export default reducers;

3.ページでwxduxを使用する
connect方法は、ウィジェットページのインスタンスをwxduxに接続します。USeStateメソッドを提供しなければなりません。この方法は、stateを受信し、ページに必要なstateを返します。

import {connect} from './wxdux/index';

Page(connect({
 data: {
  sex: ' ',
 },
 onLoad() {
  // ...
 },
 $useState(state) {
  return {
   name: state.name,
  },
 },
}))

4.wxmlにnameを使う

<view>{{name}}</view>

5.トリガstore更新
dispatch方法を使用して、この方法はオブジェクトをパラメータとして受信し、オブジェクトはtypeフィールドがactionのタイプを表している必要があり、wxduxはこのactionによってstateを更新し、nameを使ったすべてのビューを更新する。

import {dispatch} from './wxdux/index';

Page(connect({
 //        ，     “  ”
 onClick() {
  const updateName = {
   type: 'update_name',
   name: '  '
  };
  dispatch(updateName);
 }
}))

締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。