wenaox
1.0.0
Una biblioteca de gestión de estado liviana y de alto rendimiento para miniprogramas WeChat (ya tiene múltiples proyectos en línea)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
Al desarrollar programas pequeños en el trabajo, descubrí que la comunicación entre componentes o entre páginas estropearía el programa y haría que fuera extremadamente difícil de mantener y expandir. El rendimiento de setData no era muy bueno y desperdiciaba muchos recursos, por lo que. Encapsulé un wenaox para su uso, decidí abrirlo para que todos lo usen. Si tiene alguna pregunta o sugerencia, puede enviar problemas y relaciones públicas. Si cree que es bueno, puede darle una estrella y alentarlo. it2333
Aunque se puede importar directamente, se recomienda utilizar npm para instalar y desarrollar, lo cual será muy conveniente.
npm i -S wenaox
or
yarn add wenaoxAcerca de cómo construir npm para programas pequeños
Crear una nueva tienda.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 } ) ;El estado y los métodos en la tienda se imprimen de la siguiente manera:
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} En la práctica, en programas pequeños medianos y grandes, habrá muchos estados y métodos compartidos. Si se definen todos juntos, será muy confuso. Por lo tanto, se proporciona un mecanismo de control múltiple que se puede dividir según páginas o funciones. .
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;La Tienda hará una distinción detallada entre el estado y los métodos de la tienda a través del nombre de la variable de control:
{
"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 ) ) ; -Conectar estado y métodos en 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 >¡Los cambios ocurren con solo hacer clic en un botón! ¡Un contador sencillo!
Dado que los atributos del miniprograma no distinguen entre componentes y páginas, escribí otro método para componentes personalizados, que es ormComp.
Entonces, si lo usa en un componente personalizado, solo necesita reemplazar orm en js con ormComp.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; Con wenaox, no tiene que preocuparse por la sincronización de datos entre páginas. Las modificaciones realizadas en cualquier lugar se sincronizarán con el lugar donde se utilizan [limitado a la página/componente que se muestra].
Esto se debe a que wenaox no actualiza la página que está oculta en la pila de páginas, sino que espera el evento de presentación antes de volver a actualizar. ¡Esto es para un mejor rendimiento !
Introduzca regeneratorRuntime en el encabezado para usar async/await
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
Después de usar async/await, se generará automáticamente una variable de carga.
{
"loading" : state . loading . asyncAddCount
}Se puede introducir en mapState y ya no es necesario escribir la carga manualmente. Por supuesto, si no lo usa, si no introduce la variable de carga correspondiente, wenaox ya no actualizará la carga correspondiente para evitarlo. pérdida de rendimiento .
Por conveniencia, wenaox proporciona el desarrollo y uso de middleware. El siguiente es un middleware de registro de wenaox.
Asegúrese de que todo el middleware fluya antes de actualizar los datos.
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; El mini programa puede personalizar la barra de pestañas. A través de wenaox, puede cambiar la cantidad de pestañas en la parte inferior y el método de salto en cualquier momento.
Todos los detalles también se muestran en los ejemplos siguientes.
encimera
MIT
