wenaox
1.0.0
WeChat ミニ プログラム用の軽量で高性能な状態管理ライブラリ (すでに複数のオンライン プロジェクトがあります)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
仕事で小さなプログラムを開発しているとき、コンポーネント間通信やページ間通信によってプログラムが混乱し、保守や拡張が非常に困難になることがわかりました。setData のパフォーマンスはあまり良くなく、多くのリソースを無駄にしていました。 wenaox をカプセル化して使用するため、誰もが使用できるようにオープンソースにすることにしました。質問や提案があれば、問題や PR を送信してください。良いと思われる場合は、スターを付けて奨励してください。それ2333
直接インポートすることもできますが、インストールや開発には npm を使用すると便利です。
npm i -S wenaox
or
yarn add wenaox小規模プログラム用の npm のビルド方法について
新しいstore.jsを作成する
import { Store } from "wenaox" ;
//数据
const state = {
count : 0 ,
} ;
//方法
const methods = {
//修改state的方法(只允许通过syncs的方法进行修改)
syncs : {
addCount ( state , payload ) {
state . count = state . count + 1 ;
} ,
} ,
//包含副作用的方法
asyncs : {
asyncAddCount ( payload , rootState ) {
setTimeout ( ( ) => {
this . addCount ( c ) ;
} ) ;
} ,
} ,
} ;
//注册store
const store = new Store ( { state , methods } ) ;ストア内の状態とメソッドは次のように出力されます。
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} 実際には、中規模および大規模な小規模プログラムでは、多くの共有ステートとメソッドが同時に定義されると非常に混乱するため、ページまたは機能に応じて分割できるマルチコントロール機構が提供されます。 。
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;ストアは、制御変数名を通じてストアの状態とメソッドを詳細に区別します。
{
"state" : { "controA" : { "count" : 0 } } ,
"methods" : { "controA" : { "addCount" : fn , "asyncAddCount" : fn } }
//略
} //app.js
import { Provider } from "wenaox" ;
import store from "xxx路径/store" ;
const appConfig = {
//some config
} ;
App ( Provider ( store ) ( appConfig ) ) ; -page.js の状態とメソッドを接続する
import { orm } from 'wenaox' ;
// 返回需要的state和methods
const mapState = state => ( {
count : state . count ,
} ) ;
const mapMethods = methods => ( {
addCount : methods . addCount ,
asyncAddCount : methods . asyncAddCount ,
} ) ;
const pageConfig = {
//some config
} ;
// 使用orm连接
Page ( orm ( mapState , mapMethods ) ( pageConfig ) ) ; < view class =" count " > count </ view >
< button bindtap =" addCount " > count + 1 </ button >
< button bindtap =" asyncAddCount " > async count + 1 </ button >ボタンをクリックするだけで変化が起こります。シンプルなカウンター！
ミニ プログラムの属性ではコンポーネントとページが区別されないため、カスタム コンポーネント用に ormComp という別のメソッドを作成しました。
したがって、カスタムコンポーネントで使用する場合は、js の orm を ormComp に置き換えるだけで済みます。
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; wenaox を使用すると、ページ間のデータ同期について心配する必要はありません。どこで行われた変更も、使用される場所 (表示されているページ/コンポーネントに限定されます) に同期されます。
これは、wenaox がページ スタックに隠されているページを更新せず、onshow イベントを待ってから再更新するためです。これはパフォーマンスを向上させるためです。
async/await を使用するためにヘッダーに regeneratorRuntime を導入します
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
async/await を使用すると、読み込み変数が自動的に生成されます。
{
"loading" : state . loading . asyncAddCount
}mapStateで導入できるので、 loadingを手動で記述する必要がなくなりました!!もちろん、これを使用しない場合、対応するloading変数を導入しない場合、wenaoxは回避するために対応するloadingを更新しなくなります。パフォーマンスの損失。
便宜上、wenaox はミドルウェアの開発と使用を提供します。 以下は wenaox のログ ミドルウェアです。
データを更新する前にすべてのミドルウェアがフローしていることを確認する
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; ミニ プログラムでは、wenaox を通じてタブバーの数やジャンプ方法をいつでも変更できます。
すべての詳細は以下の例にも示されています
カウンタ
マサチューセッツ工科大学
