mobx-event
v1.1.0
Published
A event emitter mobx based
Downloads
2
Readme
Mobx Event
Usage
1 - Create a event instance
const MobxEvent = require('mobx-event');
const CartEvent = new MobxEvent({ products: [], total: 0 });
2 - Listen state changes
// get state changes
CartEvent.on('change', newState => console.log(newState));
// or only changed attribute:
CartEvent.on('change-total', total => console.log(total));
3 - Manipulate state
CartEvent.state.products.push({ name: 'TV LED', price: 1200 });
// { products: [{ name: 'TV LED', price: 1200 }] }
Methods
instance.rollback( times: int, default = 1 )
Rollback to last state.
Return: undefined
instance.history()
Return a history array;
Return: array
Using with marko
1 - Export event instance. Ex: gallery.event.js
const MobxEvent = require('mobx-event');
module.exports = new MobxEvent({ photos: [], mode: 'grid' });
2 - Create component to subscribe event
// gallery/index.marko
import GalleryEvent from './gallery.event.js'
class {
onMount() {
this
.subscribeTo(GalleryEvent)
.on('change', () => { this.forceUpdate(); });
}
<div>
<div class=GalleryEvent.getState().mode>
<img for(photo in GalleryEvent.state.photos) src=photo.src title=photo.title />
</div>
<photo-mode ...GalleryEvent.getState() />
</div>
3 - Child component receive state from Event
// gallery/components/photo-mode/index.marko
import GalleryEvent from '../../gallery.event.js'
class {
changeMode(mode) {
GalleryEvent.state.mode = mode;
}
}
<div>
<button on-click('changeMode', 'grid') class={ active: input.mode === 'grid' }>Grid</button>
<button on-click('changeMode', 'table') class={ active: input.mode === 'table' }>Table</button>
</div>
Advanced
Extending
const MobxEvent = require('mobx-event');
class TeamEvent extends MobxEvent {
constructor(...args) {
super(...args);
}
addMember(member) {
this.state.members.push(member);
}
}
module.exports = TeamEvent;