wenaox
1.0.0
Uma biblioteca de gerenciamento de estado leve e de alto desempenho para miniprogramas WeChat (já possui vários projetos online)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
Ao desenvolver pequenos programas no trabalho, descobri que a comunicação entre componentes ou entre páginas atrapalharia o programa e tornaria extremamente difícil sua manutenção e expansão. O desempenho do setData não era muito bom e desperdiçava muitos recursos. Encapsulei um wenaox Para uso, decidi abri-lo para que todos possam usar. Se você tiver alguma dúvida ou sugestão, fique à vontade para enviar problemas e PRs. Se você achar que é bom, pode dar uma estrela e encorajá-lo. isto2333
Embora possa ser importado diretamente, é recomendável usar o npm para instalação e desenvolvimento, o que será muito conveniente.
npm i -S wenaox
or
yarn add wenaoxSobre como construir npm para programas pequenos
Crie uma nova loja.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 } ) ;O estado e os métodos na loja são impressos da seguinte forma:
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} Na prática, em programas pequenos de médio e grande porte, haverá muitos estados e métodos compartilhados. Se todos forem definidos juntos, será muito confuso. Portanto, é fornecido um mecanismo multi-controle, que pode ser dividido de acordo com páginas ou funções. .
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;A Loja fará uma distinção detalhada entre o estado e os métodos da loja através do nome da variável de controle:
{
"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 ) ) ; -Conecte estado e métodos em 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 >As mudanças acontecem com o clique de um botão! Um contador simples!
Como os atributos do miniprograma não fazem distinção entre componentes e páginas, escrevi outro método para componentes personalizados, que é ormComp.
Portanto, se você usá-lo em um componente personalizado, precisará apenas substituir orm em js por ormComp.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; Com wenaox, você não precisa se preocupar com a sincronização de dados entre páginas. As modificações feitas em qualquer lugar serão sincronizadas com o local onde são usadas [limitadas à página/componente que está sendo exibido].
Isso ocorre porque o wenaox não atualiza a página que está oculta na pilha de páginas, mas aguarda o evento onshow antes de atualizar. Isso é para melhor desempenho !
Introduzir regeneratorRuntime no cabeçalho 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);
},
},
};
Após usar async/await, uma variável de carregamento será gerada automaticamente.
{
"loading" : state . loading . asyncAddCount
}Ele pode ser introduzido no mapState, e você não precisa mais escrever o carregamento manualmente!! Claro, se você não usá-lo, se não introduzir a variável de carregamento correspondente, o wenaox não atualizará mais o carregamento correspondente para evitar. perda de desempenho .
Por conveniência, wenaox fornece o desenvolvimento e uso de middleware. A seguir está um middleware de log do wenaox.
Certifique-se de que todo o middleware flua antes de atualizar os dados
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; O miniprograma pode personalizar a barra de guias. Através do wenaox, você pode alterar o número de guias na parte inferior e o método de salto a qualquer momento.
Todos os detalhes também são mostrados nos exemplos abaixo
contador
MIT
