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

也就是其实这个数据不是 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