在这里，我一次性把编辑、删除、标记已完成任务的功能三个功能都加上了（偷懒...）我会一个个来解释。

1.删除
看名字能看的出来，我在一个删除图标（还是bootstrap啦～）上绑定了一个点击事件deleteTask，里面的内容是执行store.js里一个deleteTask的函数，同时传入一个index的参数。而在相关的store.js里，我们在mutations里添加deleteTask函数相关的代码：

deleteTask(state,index){
        state.items.splice(index,1)
}

删除对应的数组数据。也就是删除指定index的相关数据。任务就搞定了。

2.编辑
这是一个难点。涉及到数据在兄弟组件之间的交换，我们仍然使用vuex。

先说说思路，我们点击sidebar组件里的编辑按钮（删除旁边的按钮），然后把这个任务设置为活动任务，然后显示在右边的编辑组件editor上。在editor上编辑完成后，点击完成按钮，修改的任务被更新到左边的任务列表sidebar上。

好了，看上面sidebar.vue的代码，我们先要完成设置活动任务（activeTask）：
computed里面需要设置方法：

activeTask(){
    return this.$store.getters.activeTask;
}

然后在编辑按钮上绑定点击事件，把当前的任务设置为活动任务：

clickTask(item){
    this.$store.commit('setActivetask',item);
}

sidebar.vue里的内容就编辑完了。接着我们需要在components文件夹创建一个组件editor.vue（忘记前面有没有创建了...），开始写这一段的代码：

这里需要提前声明的是，下面这一段的代码是我最没把握的代码，因为我不确定这一段是不是有效率的，但是它肯定是能跑起来的。

<template>
  <div class="sidebar">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="text-left">任务编辑</h3>
      </div>
      <div class="panel-body">
         <p>任务名称</p>
         <input type="text" class="form-control task-input" placeholder="任务名称" v-bind:value="task" v-on:input="saveTask">
         <p>任务详情</p>
         <textarea class="form-control details-input" rows="3" placeholder="任务详情" v-bind:value="details" v-on:input="saveDetails"></textarea>
         <p>任务期限</p>
         <input type="text" class="form-control settime-input" placeholder="格式：20170606" v-bind:value="setTime" v-on:input="saveSettime">
         <h3><i class="glyphicon glyphicon-ok pull-right" v-on:click="save"></i></h3>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'editor',
    data() {
      return {

      }
    },
    computed:{
      items(){
        return this.$store.getters.items;
      },
      task(){
        this.taskInput=this.$store.getters.activeTask.task;
        return this.$store.getters.activeTask.task;
      },
      details(){
        this.detailsInput=this.$store.getters.activeTask.details;
        return this.$store.getters.activeTask.details;
      },
      setTime(){
        this.settimeInput=this.$store.getters.activeTask.setTime;
        return this.$store.getters.activeTask.setTime;
      }
    },
    methods:{
      saveTask(e){
        this.taskInput=e.target.value;
      },
      saveDetails(e){
        this.detailsInput=e.target.value;
      },
      saveSettime(e){
        this.settimeInput=e.target.value;
      },
      save(){
        this.$store.commit('editTask',this.taskInput);
        this.$store.commit('editDetails',this.detailsInput);
        this.$store.commit('editSettime',this.settimeInput);
        this.$store.commit('clearAll');
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 input,textarea{
     margin-bottom: .3rem;
 }
 i{
   cursor: pointer;
   margin-right: .2rem;
 }
</style>

说明如下：
1.computed里的方法分别对应的是items任务数组（包含所有建立的任务数据）、task任务名称数据、details任务描述数据、setTime任务时间数据。这几个方法，除了第一个，其他的功能都是在对应的input表单显示活动任务（activeTask）的值。

2.methods里的方法，前三个都是在对应的input输入新值时触发事件，它会把新输入的值分别保存在一个地方。（比如task值就会保存在this.taskInput，taskInput是类名为task-input的input，其他两个以此类推)第四个save()，会把前面保存的三个值赋给活动任务。这也是我不敢确定的地方，因为代码这样写，有多少个不同的值就要用多少个函数，很不环保。

这些commit里的函数都放在store.js的mutations里，下面再说。

以上就把editor.vue的代码编辑完了，接着编辑store.js。
我们添加一下内容：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state={
    items:[],
    activeTask:{}
}
const getters={
    items:state=>state.items,
    activeTask:state=>state.activeTask
}
const mutations={
    addTask(state,task){
        var myDate=new Date();
        var y=myDate.getFullYear();
        var m,
            mm=myDate.getMonth()+1;
        if(mm<10){
            m="0"+mm;
        }else{
            m=mm;
        }
        var d,
            dd=myDate.getDate();
        if(dd<10){
            d="0"+dd;
        }else{
            d=dd;
        }
        var currentTime=y+m+d;
        state.items.push({
            task,
            isFinished:false,
            details:"this is a new task",
            setTime:currentTime
        })
    },
    deleteTask(state,index){
        state.items.splice(index,1)
    }，
    setActivetask(state,item){
        state.activeTask=item
    },
    editTask(state,task){
        state.activeTask.task=task;
        for(let i in state.items){
            if(i==state.activeTask){
                i.task=task;
            }
        }
    },
    editDetails(state,details){
        state.activeTask.details=details;
        for(let i in state.items){
            if(i==state.activeTask){
                i.details=details;
            }
        }
    },
    editSettime(state,settime){
        state.activeTask.setTime=settime;
        for(let i in state.items){
            if(i==state.activeTask){
                i.setTime=settime;
            }
        }
    }
}

export default new Vuex.Store({
  state,
  getters,
  mutations
})

ok，主要是在state和getters里添加了活动任务，mutations里添加了前面提到的相关函数，对比一下看看有没有遗漏。

到这里，这个todolist最核心的任务就完成了。但是我们还需要一些细节：
1.修改任务后，把右边的活动任务清空，回复初始状态。
2.修改任务的完成时间后，需要知道哪些任务更加紧急，需要让任务列表重新排序。
3.修改任务完成状态。

我们来依次完成：
1.这个比较简单，我们只要修改完后点击完成按钮时触发一个设置活动任务（activeTask）为空的方法就好了。
在editor.vue组件的save()方法添加：

this.$store.commit('clearAll');

在store.js的mutations添加：

clearAll(state){
        state.activeTask={};
},

done！

2.我们在左边的任务列表上放一个刷新按钮，点击时，会根据任务数据的setTime属性重新排序，时间近的在前面，时间远的在后面。
sidebar.vue的methods添加：

reList(){
        this.$store.commit('reList')
}

在store.js的mutations添加：

reList(state){
        function compare(propertyName){
            return function(obj1,obj2){
                var value1=obj1[propertyName];
                var value2=obj2[propertyName];
                if(value2<value1){
                    return 1;
                }else if(value2>value1){
                    return -1;
                }else{
                    return 0;
                }
            }
        }

        state.items.sort(compare('setTime'));
}

这里用到了一个基础的比较大小重新排序的功能。done！

3.这个也不复杂，我们在任务列表组件sidebar.vue组件的多选框上添加点击事件，methods里添加：

itemCheck(index){
        this.$store.commit('toggleCheck',index);
},

在store.js的mutations添加：

toggleCheck(state,index){
        state.items[index].isFinished=!state.items[index].isFinished
},

因为在创建任务时，我们会添加一个isFinished的属性，默认为false，通过以上方法，我们就可以切换isFinished的值，也就是切换任务的是否完成状态。搞定。

到这里，这个todo-list基本就算完成了。

四、适配移动端和储存功能

接下来还有一些需要调整的，首先是移动端的适配，我们要先打开根目录的index.html，添加一下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <title>todolist</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 下面是我添加的 -->
    <script>
      let html = document.documentElement;
      window.rem = html.getBoundingClientRect().width / 25 ;
      html.style.fontSize = window.rem + 'px';
    </script>
  </body>
</html>

添加meta和一段JS完成bootstrap的适应和rem方法自适应大小。

第二是localstorage实现存储。毕竟是一个todolist应用，每次打开都要重新建任务怎么行？
这里我用了一个vue的localstorage插件：地址
npm安装插件：

npm install vue-localstorage --save

store.js配置：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import VueLocalStorage from 'vue-localstorage'
Vue.use(VueLocalStorage)

const STORAGE_KEY='myapp-todolist'
const state={
    items:JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]'),
    activeTask:{}
}
const getters={
    items:state=>state.items,
    activeTask:state=>state.activeTask
}
const mutations={
    addTask(state,task){
        var myDate=new Date();
        var y=myDate.getFullYear();
        var m,
            mm=myDate.getMonth()+1;
        if(mm<10){
            m="0"+mm;
        }else{
            m=mm;
        }
        var d,
            dd=myDate.getDate();
        if(dd<10){
            d="0"+dd;
        }else{
            d=dd;
        }
        var currentTime=y+m+d;
        state.items.push({
            task,
            isFinished:false,
            details:"this is a new task",
            setTime:currentTime
        })
    },
    deleteTask(state,index){
        state.items.splice(index,1)
    },
    toggleCheck(state,index){
        state.items[index].isFinished=!state.items[index].isFinished
    },
    setActivetask(state,item){
        state.activeTask=item
    },
    editTask(state,task){
        state.activeTask.task=task;
        for(let i in state.items){
            if(i==state.activeTask){
                i.task=task;
            }
        }
    },
    editDetails(state,details){
        state.activeTask.details=details;
        for(let i in state.items){
            if(i==state.activeTask){
                i.details=details;
            }
        }
    },
    editSettime(state,settime){
        state.activeTask.setTime=settime;
        for(let i in state.items){
            if(i==state.activeTask){
                i.setTime=settime;
            }
        }
    },
    clearAll(state){
        state.activeTask={};
    },
    reList(state){
        function compare(propertyName){
            return function(obj1,obj2){
                var value1=obj1[propertyName];
                var value2=obj2[propertyName];
                if(value2<value1){
                    return 1;
                }else if(value2>value1){
                    return -1;
                }else{
                    return 0;
                }
            }
        }

        state.items.sort(compare('setTime'));
    }
}

const localStoragePlugin = store=>{
    store.subscribe((mutation,{items})=>{
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    })
}


export default new Vuex.Store({
  state,
  getters,
  mutations,
  plugins:[localStoragePlugin]
})

要改的解放并不多，主要是把任务数据的数组转换成localstorage的格式。
完成了！撒花～～

五、源码和参考文献

这个todo-list实在是简陋不堪，但是基础不好的我也差不多花了2个星期才写完，在写这个应用的时候我是抱着诚恳的态度的，所以也确实花了很多的心血，包括学习命令行，npm、搭建项目脚手架、查找资料，中间的磨练和挫折也不必多说，一切的辛苦都在看着这个应用能够运行的那一刻烟消云散了。

写了一篇这么长的，我尽量用我认为最明白清楚的语言来表达，中间肯定有很多错误和疏漏，欢迎大神拍砖、指点。写这篇blog的目的也就是重新梳理一下代码的思路，我是抱着学习的态度来写的。中间的代码有很多重复的地方，在大神看来，无疑是有着占篇幅的嫌疑，但也是希望能更加清楚地表述，方便新人理解。我也是刚入此门，十分能理解代码不详细带来的困惑。

在起名字的时候，我没有直接说这是一个todo-list，而说是一个应用盒子，是因为我想把它作为一个我的代表项目，里面会集成许多的应用，todolist、音乐、计算器等等，一方面练手，一方面攒一个拿得出手的项目，方便以后求职。

说了这么多废话，下面是干货：
todo-list源码（我的github，欢迎star，fork）
Vue2.0 新手完全填坑攻略（如果你还没学过Vue，先看这个入门）
vue2.0 构建单页应用最佳实战（bootstrap+vue架构一个todolist）
Vue.js+Vuex：一个简单的记事本（介绍vuex项目实战最清楚的教程）
当然，官方文档也是非常重要的，看着教程你可以写出需要的代码，但是只有看着文档，你才能知道为什么要这样写。
vue官方文档
vuex官方文档

that's all～