wenaox
1.0.0
Une bibliothèque de gestion d'état légère et performante pour les mini-programmes WeChat (possède déjà plusieurs projets en ligne)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
Lors du développement de petits programmes au travail, j'ai découvert que la communication entre composants ou entre pages gâcherait le programme et rendrait extrêmement difficile sa maintenance et son expansion. Les performances de setData n'étaient pas très bonnes et gaspillaient beaucoup de ressources. J'ai encapsulé un wenaox Pour l'utiliser, j'ai décidé de l'ouvrir en source libre pour que tout le monde puisse l'utiliser. Si vous avez des questions ou des suggestions, vous êtes invités à soumettre des problèmes et des relations publiques. Si vous pensez que c'est bon, vous pouvez lui donner une étoile et l'encourager. ça2333
Bien qu'il puisse être importé directement, il est recommandé d'utiliser npm pour l'installer et le développer, ce qui sera très pratique.
npm i -S wenaox
or
yarn add wenaoxÀ propos de la façon de créer npm pour les petits programmes
Créer un nouveau 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 } ) ;L'état et les méthodes dans le magasin sont imprimés comme suit :
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} En pratique, dans les petits et moyens programmes, il y aura de nombreux états et méthodes partagés. S'ils sont tous définis ensemble, cela sera très déroutant. Par conséquent, un mécanisme multi-contrôle est fourni, qui peut être divisé en fonction des pages ou des fonctions. .
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;Le Store fera une distinction détaillée entre l'état et les méthodes du magasin via le nom de la variable de contrôle :
{
"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 ) ) ; -Connecter l'état et les méthodes dans 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 >Les changements se produisent en un clic ! Un simple compteur !
Étant donné que les attributs du mini-programme ne font pas de distinction entre les composants et les pages, j'ai écrit une autre méthode pour les composants personnalisés, qui est ormComp.
Donc, si vous l'utilisez dans un composant personnalisé, il vous suffit de remplacer orm dans js par ormComp.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; Avec wenaox, vous n'avez pas à vous soucier de la synchronisation des données entre pages. Les modifications apportées n'importe où seront synchronisées à l'endroit où elles sont utilisées [limitées à la page/au composant affiché].
En effet, wenaox ne met pas à jour la page masquée dans la pile de pages, mais attend l'événement onshow avant de procéder à une nouvelle mise à jour. C'est pour de meilleures performances !
Introduisez regeneratorRuntime dans l'en-tête pour utiliser async/await
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
Après avoir utilisé async/await, une variable de chargement sera automatiquement générée.
{
"loading" : state . loading . asyncAddCount
}Il peut être introduit dans mapState, et vous n'avez plus besoin d'écrire le chargement manuellement. Bien sûr, si vous ne l'utilisez pas, si vous n'introduisez pas la variable de chargement correspondante, wenaox ne mettra plus à jour le chargement correspondant pour éviter !! perte de performances .
Pour plus de commodité, wenaox propose le développement et l'utilisation d'un middleware. Ce qui suit est un middleware de journalisation de wenaox.
Assurez-vous que tous les middlewares circulent avant de mettre à jour les données
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; Le mini programme peut personnaliser la barre d'onglets. Grâce à wenaox, vous pouvez modifier le nombre d'onglets en bas et la méthode de saut à tout moment.
Tous les détails sont également affichés dans les exemples ci-dessous
comptoir
MIT
