七、Store

最后更新于:2022-04-01 22:36:22

## 七、Store Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。 在我们的 Demo 中,有一个[`ListStore`](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/stores/ListStore.js),所有数据都存放在那里。 > ~~~ > // stores/ListStore.js > var ListStore = { > items: [], > > getAll: function() { > return this.items; > }, > > addNewItemHandler: function (text) { > this.items.push(text); > }, > > emitChange: function () { > this.emit('change'); > } > }; > > module.exports = ListStore; > ~~~ 上面代码中,`ListStore.items`用来保存条目,`ListStore.getAll()`用来读取所有条目,`ListStore.emitChange()`用来发出一个"change"事件。 由于 Store 需要在变动后向 View 发送"change"事件,因此它必须实现事件接口。 > ~~~ > // stores/ListStore.js > var EventEmitter = require('events').EventEmitter; > var assign = require('object-assign'); > > var ListStore = assign({}, EventEmitter.prototype, { > items: [], > > getAll: function () { > return this.items; > }, > > addNewItemHandler: function (text) { > this.items.push(text); > }, > > emitChange: function () { > this.emit('change'); > }, > > addChangeListener: function(callback) { > this.on('change', callback); > }, > > removeChangeListener: function(callback) { > this.removeListener('change', callback); > } > }); > ~~~ 上面代码中,`ListStore`继承了`EventEmitter.prototype`,因此就能使用`ListStore.on()`和`ListStore.emit()`,来监听和触发事件了。 Store 更新后(`this.addNewItemHandler()`)发出事件(`this.emitChange()`),表明状态已经改变。 View 监听到这个事件,就可以查询新的状态,更新页面了。
';