// 获取本地存储中的内容
fetch:function(){
// JSON.parse()解析一个json字符串
// localStorage.getItem 从本地存储中获取STORAGE_KEY字段的值
var todos = JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]');
// foreach遍历todos，两个参数分别为遍历出的每一个子单元及对应的索引
todos.forEach(function(todo,index){
todo.id = index;
})
todoStorage.uid = todos.length;
return todos;
},// 保存时将内容写进本地存储
save:function(todos){
// localStorage.setItem 将todos转化成字符串存入本地存储，键名为STORAGE_KEY
localStorage.setItem(STORAGE_KEY,JSON.stringify(todos))
}

}

// 可视化状态过滤设置
// 包括全选（all）、选择未完成（active）、选择已完成（completed）
var filters = {
all:function(todos){
return todos;
},// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
active:function(todos){
return todos.filter(function(todo){
return !todo.completed;
})
},completed:function(todos){
return todos.filter(function(todo){
return todo.completed;
})
}
}

// vue实例化
var app = new Vue({

// data 参数设置
data:{
todos:todoStorage.fetch(),newTodo:'',editedTodo:null,visibility:'all'
},// watch 监视todos在本地储存中的变化
watch:{
todos:{
handler:function(todos){
todoStorage.save(todos)
},deep:true
}
},// computed 检测数据发生变动时执行函数
computed:{

filteredTodos:function(){
  return filters[this.visibility](this.todos)
},remaining:function(){
  return filters.active(this.todos).length
},allDone:{
  get:function(){
    return this.remaining === 0
  },set:function(value){
    this.todos.forEach(function(todo){
      todo.completed = value
    })
  }

}

},// methods 方法设置
methods:{
addTodo:function(){
var value = this.newTodo && this.newTodo.trim()
if(!value){
return;
}
this.todos.push({
id:todoStorage.uid++,title:value,completed:false
})
this.newTodo = ''
},removeTodo:function(todo){
this.todos.splice(this.todos.indexOf(todo),1)
},editTodo:function(todo){
this.beforeEditCache = todo.title;
this.editedTodo = todo
},doneEdit:function(todo){
if(!this.editedTodo){
return;
};
this.editedTodo = null;
todo.title = todo.title.trim()
if(!todo.title){
this.removeTodo(todo)
}
},cancelEdit:function(todo){
this.editedTodo = null;
todo.title = this.beforeEditCache
},removeCompleted:function(){
this.todos = filters.active(this.todos)
}
},directives:{
'todo-focus':function(el,binding){
if(binding.value){
el.focus()
}
}
}
})

// hashchange URL的片段标识符更改触发
function onHashChange(){
var visbility = window.location.hash.replace(/#\/?/,'');
if(filters[visbility]){
app.visibility = visbility
}else{
window.location.hash = '';
app.visbility = 'all'
}
}

window.addEventListener('hashchange',onHashChange)
onHashChange()

// mount 手动挂载
app.$mount('.todoapp')