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

</template>

<script>
export default {
props: {
initList: {
type: Array
}
},
data () {
return {
list: [] }
},
events: {
add (input) {
if (!input) return false
this.list.unshift({
title: input,
done: false
})
}
}
}
</script>

<style lang="less" scoped>
ul {
margin-left: 2rem;
padding: 0;

.done {
text-decoration: line-through;
}
}
</style>

Form.vue:

<template>
 <h1>{{username}}'s Todo List</h1>
 <form v-on:submit="add" v-on:submit.prevent>
 <input type="text" v-model="input"/>
 <input type="submit" value='add' />
 </form>
</template>
<script>
export default {
 props: {
 username: {
  type: String,
  default: 'Unnamed'
 }
 },
 data () {
 return {
  input: ''
 }
 },
 methods: {
 add () {
  this.$dispatch('add', this.input)
  this.input = ''
 }
 }
}
</script>

Todo.vue:

<template>
 <div id="todo">
 <todo-form username='Lily'></todo-form>
 <todo-list></todo-list>
 </div>
</template>
<script>
import Form from './Form.vue'
import List from './List.vue'
export default {
 components: {
 'todo-form': Form,
 'todo-list': List
 },
 events: {
 add (input) {
  this.$broadcast('add', input)
 }
 }
}
</script>
<style>
</style>

App.vue:

<template>
 <todo></todo>
</template>
<script>
import Todo from './components/Todo.vue'
export default {
 components: {
 'todo': Todo
 }
}
</script>
<style>
</style>

这样我们就把之前的 Todo List 按照 模块化 重写了一遍。模块化是构建大型应用的基础之一，但是这一点还不够，我们还需要做到：
 •更好的状态管理，把不同组件共享的 State 独立出来管理
 •自动化测试
 •路由等 

这里我们只做其中一个，就是把 State 独立成一个单独模块。很显然，对一个 Todo List 应用来说，保存 todo list 的数据结构就是不同组件共享的 State。
之前我们为什么需要进行事件广播，就是因为不同组件之间要操作的数据就保存在 List.vue 中，所以在 Form.vue 中想增加一条数据的时候需要通过事件的方式去通知 List.vue 来添加。