Simple, predictable, developer friendly state management for alipay mini-program
npm install herculex- [x] Component, Page, global wrapper
- [x] vuex-like apis and concept: actions, mutations, getters, plugins
- [x] strengthen mutation, getters: add immutable helper, global power to getters.and improve mutation usecase, add some common innerMutation
- [x] plugins support, add logger as inner plugin
- [x] cross page communication: message channel, auto router dispatcher(manage router ), get ready-only State by namespace
- [x] cross components communication: support centralized ref management
- [x] connect: connect Page to Component, add mapStateToProps, mapGettersToProps, use more developer friendly way.
- [x] mapHelpers: connect actions and mutations to Page, Componnet methods
- [x] global store support: manage all store, component instance and global state, global message bus ,event bus
- [x] event bus support
- [x] router: improve router usecase, auto router dispatcher, add resume lifecycle
- [x] utils: immutable heplers, common functional tools, urlParser, promiseWrapper...
- [x] use immer and immutable helper to promise immutable
- [x] magic memoization: add special memoization feature to mapHelpersToProps
* Installation: npm install herculex --save.
* basic usage:
* index.js
`` `
import store from './store';
const app = getApp();
Page(store.register({
mapActionsToMethod: ['getUserInfo'],
mapMutationsToMethod: ['helperWay'],
onLoad() {
const message = this.$message.pop('card-home');
// get message from last page as you like
},
onReady() {
const componentInstance = this.$getRef('card-input');
// get component ref, then get data when you need ,specially in form condition
},
onResume(ctx) {
// get ctx here,
},
...
onTap() {
}
})
`
* store.js
`
export default new Store({
connectGlobal: true,
state: {
userInfo: {},
bannerList: [],
UI,
},
getters: {
// functional promgraming, add some helpers
cardCount: (state, getters, global) => global.getIn(['entity', 'cardList', 'length'], 0),
avatar: state => state.getIn(['userInfo', 'iconUrl'], ASSETS.DEFAULT_AVATAR),
nickName: state => state.getIn(['userInfo', 'nick']),
cardList: (state, getters, global) => global.getIn(['entity', 'cardList'], []).map(mapCardItemToData),
},
mutations: {
mutableWay(state, payload) {
// use immer promise immutable
state.a = payload.a
},
helperWay(state, payload) {
// use inner helper: setIn, deleteIn, update
return state.setIn(['userInfo', 'name'], payload.name)
}
},
plugins: [ 'logger' ], // inner plugin logger
actions: {
async getUserInfo({ commit, state, dispatch, global, getters, }, payload) {
// get router and context in global store, all state are binded immutable helper
const routerCtx = global.getIn(['router', 'currentRouter']);
const avatar = getters.getIn('avatar');
const userInfo = await cardListService.getUserInfo();
commit('getUserInfo', { userInfo });
},
},
});
`
* index.axml
``
{{userInfo.name}}