wenaox
1.0.0
WeChat 미니 프로그램을 위한 경량의 고성능 상태 관리 라이브러리(이미 여러 온라인 프로젝트가 있음)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
직장에서 작은 프로그램을 개발할 때 컴포넌트 간 통신이나 페이지 간 통신으로 인해 프로그램이 엉망이 되고 유지 관리 및 확장이 극도로 어려워지는 것을 발견했습니다. setData의 성능이 그다지 좋지 않고 많은 리소스를 낭비합니다. wenaox를 캡슐화하여 모든 사람이 사용할 수 있도록 오픈 소스로 만들기로 결정했습니다. 질문이나 제안 사항이 있으면 이슈와 PR을 제출해 주시기 바랍니다. 괜찮다고 생각하시면 별점을 주고 격려해 주세요. it2333
직접 import도 가능하지만 npm을 사용하여 설치하고 개발하는 것이 매우 편리할 것입니다.
npm i -S wenaox
or
yarn add wenaox소규모 프로그램을 위한 npm 구축 방법에 대해
새 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 } ) ;저장소의 상태와 메서드는 다음과 같이 인쇄됩니다.
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} 실제로 중대형 소규모 프로그램에서는 공유되는 상태와 메소드가 많으므로 모두 함께 정의하면 매우 혼란스럽습니다. 따라서 페이지나 기능에 따라 나눌 수 있는 다중 제어 메커니즘이 제공됩니다. .
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;Store는 제어 변수 이름을 통해 Store의 상태와 메소드를 자세히 구분합니다.
{
"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 ) ) ; -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 >버튼을 클릭하면 변경이 발생합니다! 간단한 카운터!
미니 프로그램의 속성은 컴포넌트와 페이지를 구분하지 않기 때문에 ormComp라는 또 다른 커스텀 컴포넌트 메소드를 작성했습니다.
따라서 이를 커스텀 컴포넌트에서 사용하는 경우 js의 orm을 ormComp로 교체하기만 하면 됩니다.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; wenaox를 사용하면 페이지 간 데이터 동기화에 대해 걱정할 필요가 없습니다. 어디에서나 수정 사항이 사용된 위치에 동기화됩니다(표시되는 페이지/구성 요소로 제한됨).
이는 wenaox가 페이지 스택에 숨겨진 페이지를 업데이트하지 않고 다시 업데이트하기 전에 onshow 이벤트를 기다리기 때문입니다. 이는 더 나은 성능을 위한 것입니다!
async/await를 사용하려면 헤더에 regeneratorRuntime을 도입하세요.
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
async/await를 사용하면 로딩 변수가 자동으로 생성됩니다.
{
"loading" : state . loading . asyncAddCount
}mapState에 도입할 수 있으며 더 이상 로딩을 수동으로 작성할 필요가 없습니다!! 물론 사용하지 않으면 해당 로딩 변수를 도입하지 않으면 wenaox는 더 이상 해당 로딩을 업데이트하지 않습니다. 성능 손실 .
편의를 위해 wenaox에서는 미들웨어 개발 및 사용을 제공합니다. 다음은 wenaox의 로그 미들웨어입니다.
데이터를 업데이트하기 전에 모든 미들웨어 흐름을 확인하세요.
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; 미니 프로그램은 wenaox를 통해 탭바를 사용자 정의할 수 있으며, 하단의 탭 수와 점프 방법을 언제든지 변경할 수 있습니다.
모든 세부 사항은 아래 예에도 나와 있습니다.
계수기
MIT
