wenaox
1.0.0
A lightweight and high-performance state management library for WeChat mini programs (already has multiple online projects)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
When developing small programs at work, I found that inter-component communication or cross-page communication would mess up the program and make it extremely difficult to maintain and expand. The performance of setData was not very good and wasted a lot of resources, so I encapsulated a wenaox For use, I decided to open source it for everyone to use. If you have any questions or suggestions, you are welcome to submit issues and PRs. If you think it is good, you can give it a star and encourage it2333
Although it can be imported directly, it is recommended to use npm to install and develop, which will be very convenient.
npm i -S wenaox
or
yarn add wenaoxAbout how to build npm for small programs
Create a new 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 } ) ;The state and methods in the store are printed as follows:
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} In practice in medium and large small programs, there will be many shared states and methods. If they are all defined together, it will be very confusing. Therefore, a multi-contro mechanism is provided, which can be divided according to pages or functions.
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;The Store will make a detailed distinction between the store's state and methods through the contro variable name:
{
"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 ) ) ; -Connect state and methods 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 >Changes happen at the click of a button! A simple counter!
Since the attributes in the mini program do not distinguish between components and pages, I wrote another method for custom components, which is ormComp.
So if you use it in a custom component, you only need to replace orm in js with ormComp.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; With wenaox, you don’t have to worry about cross-page data synchronization. Modifications made anywhere will be synchronized to the place where they are used [limited to the page/component being displayed]
This is because wenaox does not update the page that is hidden in the page stack, but waits for the onshow event before re-updating. This is for better performance !
Introduce regeneratorRuntime in the header to use async/await
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
After using async/await, a loading variable will be automatically generated.
{
"loading" : state . loading . asyncAddCount
}It can be introduced in mapState, and you no longer need to write loading manually!! Of course, if you don’t use it, if you don’t introduce the corresponding loading variable, wenaox will no longer update the corresponding loading to avoid performance loss .
For convenience, wenaox provides the development and use of middleware. The following is a log middleware of wenaox
Ensure that all middleware flows before updating the data
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; The mini program can customize the tabbar. Through wenaox, you can change the number of tabs at the bottom and the jump method at any time.
All details are also shown in the examples below
counter
MIT
