wenaox
1.0.0
Pustaka manajemen negara yang ringan dan berkinerja tinggi untuk program mini WeChat (sudah memiliki banyak proyek online)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
Saat mengembangkan program kecil di tempat kerja, saya menemukan bahwa komunikasi antar komponen atau komunikasi lintas halaman akan mengacaukan program dan membuatnya sangat sulit untuk dipelihara dan diperluas. Kinerja setData tidak terlalu baik dan menyia-nyiakan banyak sumber daya Saya merangkum wenaox Untuk digunakan, saya memutuskan untuk menjadikannya open source agar semua orang dapat menggunakannya. Jika Anda memiliki pertanyaan atau saran, Anda dapat mengirimkan masalah dan PR. Jika menurut Anda itu bagus, Anda dapat memberinya bintang dan memberi semangat itu2333
Meskipun dapat diimpor secara langsung, disarankan untuk menggunakan npm untuk menginstal dan mengembangkan, yang akan sangat memudahkan.
npm i -S wenaox
or
yarn add wenaoxTentang cara membangun npm untuk program kecil
Buat store.js baru
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 } ) ;Status dan metode di toko dicetak sebagai berikut:
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} Dalam praktiknya pada program kecil menengah dan besar akan banyak state dan metode yang dibagikan. Jika semuanya didefinisikan secara bersamaan akan sangat membingungkan, oleh karena itu disediakan mekanisme multikontro yang dapat dibagi berdasarkan halaman atau fungsi .
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;Store akan membuat perbedaan mendetail antara status dan metode toko melalui nama variabel contro:
{
"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 ) ) ; -Hubungkan status dan metode di 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 >Perubahan terjadi hanya dengan mengklik tombol! Penghitung sederhana!
Karena atribut dalam program mini tidak membedakan antara komponen dan halaman, saya menulis metode lain untuk komponen khusus, yaitu ormComp.
Jadi jika Anda menggunakannya di komponen custom, Anda hanya perlu mengganti orm di js dengan ormComp.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; Dengan wenaox, Anda tidak perlu khawatir tentang sinkronisasi data lintas halaman. Modifikasi yang dilakukan di mana saja akan disinkronkan ke tempat penggunaannya [terbatas pada halaman/komponen yang ditampilkan]
Hal ini karena wenaox tidak mengupdate halaman yang tersembunyi di tumpukan halaman, tetapi menunggu acara onshow sebelum melakukan update ulang.
Perkenalkan regeneratorRuntime di header untuk menggunakan async/menunggu
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
Setelah menggunakan async/await, variabel pemuatan akan dibuat secara otomatis.
{
"loading" : state . loading . asyncAddCount
}Itu dapat diperkenalkan di mapState, dan Anda tidak perlu lagi menulis pemuatan secara manual!! Tentu saja, jika Anda tidak menggunakannya, jika Anda tidak memasukkan variabel pemuatan yang sesuai, wenaox tidak akan lagi memperbarui pemuatan yang sesuai untuk menghindarinya. kehilangan kinerja .
Untuk kenyamanan, wenaox menyediakan pengembangan dan penggunaan middleware. Berikut ini adalah log middleware dari wenaox
Pastikan semua middleware mengalir sebelum memperbarui data
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; Program mini ini dapat menyesuaikan bilah tab. Melalui wenaox, Anda dapat mengubah jumlah tab di bagian bawah dan metode lompat kapan saja.
Semua detail juga ditunjukkan pada contoh di bawah ini
menangkal
MIT
