前端框架Vue.js构建大型应用浅析(2)

这里我们只做其中一个，就是把 State 独立成一个单独模块。很显然，对一个 Todo List 应用来说，保存 todo list 的数据结构就是不同组件共享的 State。
之前我们为什么需要进行事件广播，就是因为不同组件之间要操作的数据就保存在 List.vue 中，所以在 Form.vue 中想增加一条数据的时候需要通过事件的方式去通知 List.vue 来添加。
也就是其实这个数据不是 List.vue 私有的，应该至少是这两个组件公有的，现在被 List.vue 据为己有之后，Form.vue 没法修改它只好通过事件进行通知。
虽然事件的方式很优雅，但其实我们可以做的更好，就是把数据独立出来，这样 Form.vue 和 List.vue 都可以直接修改数据，而不用那么麻烦发通知。

这里我们增加一个 Store.js 文件：

export default { list: [ ], add (title) { if (!title) return this.list.unshift({ title: title, done: false }) } }

然后 我们可以把 List.vue 改成这样，这里只贴出JS部分的代码：

import Store from '../Store.js' export default { props: { initList: { type: Array } }, data () { return Store } }

Form.vue 也不需要广播了，直接调用 Store.add 方法既可以添加:

import Store from '../Store.js' export default { props: { username: { type: String, default: 'Unnamed' } }, data () { return { input: '' } }, methods: { add () { Store.add(this.input) this.input = '' } } }

这样一改之后，整个逻辑会清晰很多，并且应用越是复杂，越是应该抽出公有的 Store ，不然会出现广播事件满天飞的情况。
另外用这个项目模板之后，hot-reload 爽的不要不要的，刷新操作都省了。

上述的源码在这里：https://github.com/lihongxun945/vue-webpack-todo-list