wenaox
1.0.0
Легкая и высокопроизводительная библиотека управления состоянием для мини-программ WeChat (уже есть несколько онлайн-проектов).
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
При разработке небольших программ на работе я обнаружил, что межкомпонентное или межстраничное взаимодействие может испортить программу и чрезвычайно затруднить ее поддержку и расширение. Производительность setData была не очень хорошей и требовала много ресурсов, поэтому. Я инкапсулировал wenaox для использования и решил открыть его исходный код для всех. Если у вас есть какие-либо вопросы или предложения, вы можете сообщать о проблемах и заявках. Если вы считаете, что это хорошо, вы можете поставить ему звезду и поощрить. это2333
Хотя его можно импортировать напрямую, для установки и разработки рекомендуется использовать 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 будет проводить детальное различие между состоянием хранилища и методами через имя управляющей переменной:
{
"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.
Поэтому, если вы используете его в пользовательском компоненте, вам нужно всего лишь заменить orm в js на ormComp.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; С wenaox вам не придется беспокоиться о межстраничной синхронизации данных. Изменения, внесенные где угодно, будут синхронизированы с местом, где они используются [ограничено отображаемой страницей/компонентом].
Это связано с тем, что wenaox не обновляет страницу, скрытую в стеке страниц, а ожидает события onshow перед повторным обновлением. Это сделано для повышения производительности !
Добавьте regeneratorRuntime в заголовок, чтобы использовать async/await.
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 можно в любой момент изменить количество вкладок внизу и способ перехода.
Все подробности также показаны в примерах ниже.
прилавок
Массачусетский технологический институт
