wenaox
1.0.0
Eine leichte und leistungsstarke Zustandsverwaltungsbibliothek für WeChat-Miniprogramme (verfügt bereits über mehrere Online-Projekte)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
Als ich bei der Arbeit kleine Programme entwickelte, stellte ich fest, dass die Kommunikation zwischen Komponenten oder über Seiten hinweg das Programm durcheinander bringen und die Wartung und Erweiterung extrem erschweren würde. Die Leistung von setData war nicht sehr gut und verschwendete daher viele Ressourcen Ich habe ein Wenaox zur Verwendung gekapselt und beschlossen, es als Open Source für alle zugänglich zu machen. Wenn Sie Fragen oder Vorschläge haben, können Sie gerne Probleme und PRs einreichen. Wenn Sie es für gut halten, können Sie ihm einen Stern geben und es ermutigen it2333
Obwohl es direkt importiert werden kann, wird empfohlen, zum Installieren und Entwickeln npm zu verwenden, was sehr praktisch ist.
npm i -S wenaox
or
yarn add wenaoxInformationen zum Erstellen von npm für kleine Programme
Erstellen Sie eine neue 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 } ) ;Der Status und die Methoden im Geschäft werden wie folgt gedruckt:
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} In der Praxis gibt es in mittleren und großen kleinen Programmen viele gemeinsame Zustände und Methoden. Wenn sie alle zusammen definiert werden, ist dies sehr verwirrend. Daher wird ein Multi-Control-Mechanismus bereitgestellt, der nach Seiten oder Funktionen unterteilt werden kann .
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;Der Store unterscheidet detailliert zwischen dem Status und den Methoden des Stores anhand des Namens der Kontrollvariablen:
{
"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 ) ) ; -Verbinden Sie Status und Methoden in 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 >Änderungen erfolgen auf Knopfdruck! Ein einfacher Zähler!
Da die Attribute im Miniprogramm nicht zwischen Komponenten und Seiten unterscheiden, habe ich eine andere Methode für benutzerdefinierte Komponenten geschrieben, nämlich ormComp.
Wenn Sie es also in einer benutzerdefinierten Komponente verwenden, müssen Sie orm in js nur durch ormComp ersetzen.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; Mit wenaox müssen Sie sich keine Gedanken über die seitenübergreifende Datensynchronisierung machen. Änderungen, die irgendwo vorgenommen werden, werden mit dem Ort synchronisiert, an dem sie verwendet werden [beschränkt auf die angezeigte Seite/Komponente].
Dies liegt daran, dass wenaox die Seite, die im Seitenstapel ausgeblendet ist, nicht aktualisiert, sondern auf das Onshow-Ereignis wartet, bevor es erneut aktualisiert wird. Dies dient der besseren Leistung !
Führen Sie regeneratorRuntime im Header ein, um async/await zu verwenden
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
Nach der Verwendung von async/await wird automatisch eine Ladevariable generiert.
{
"loading" : state . loading . asyncAddCount
}Es kann in MapState eingeführt werden, und Sie müssen das Laden nicht mehr manuell schreiben!! Leistungsverlust .
Der Einfachheit halber bietet wenaox die Entwicklung und Verwendung von Middleware. Im Folgenden finden Sie eine Protokoll-Middleware von wenaox
Stellen Sie sicher, dass die gesamte Middleware funktioniert, bevor Sie die Daten aktualisieren
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; Das Miniprogramm kann die Tableiste anpassen. Über wenaox können Sie jederzeit die Anzahl der Tabs unten und die Sprungmethode ändern.
Alle Einzelheiten sind auch in den folgenden Beispielen dargestellt
Schalter
MIT
