Vue增删改查(Todo-list进阶版)

效果实现流程：

1. 首先创建一个vue项目，Todo-list总共分三步来写，
2. 头部我们使用input框来实现输入的数据，使用键盘事件点击添加到数据中，使用v-model实现响应式数据，
3. 第二步来进行筛选，是完成还是未完成
4. 我们添加的数据在这里拿到进行渲染，然后我们用css3的属性实现删除的显示和隐藏

 代码实现思路：

vuex代码实现思路：

我们在vuex中创建一个空对象，在定义一个初始值和初始状态，当我们的全部，然后在用map循环通过id来判断他的状态，是true还是false，实现单选和全选

代码实现：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    listData:[],
    status:'all',
    totalselect:false
  },
  mutations: {
		SET_LIST_DATA(state,data){
      state.listData.push(data)
      state.totalselect=false
      localStorage.setItem('listData',JSON.stringify(state.listData))
      localStorage.setItem('totalselect',JSON.stringify(state.totalselect))
    },
    GET_LIST(state,data){
      const {listData,totalselect}=data
      state.listData=listData
      state.totalselect=totalselect
    },
    SET_SELECT(state,id){
      state.listData.map(item=>{
        if(item.id==id){
          item.select=!item.select
        }
      })
      const num=state.listData.filter(item=>item.select).length
      if(num==state.listData.length){
        state.totalselect=true
      }else{
        state.totalselect=false
      }
      localStorage.setItem('listData',JSON.stringify(state.listData))
      localStorage.setItem('totalselect',JSON.stringify(state.totalselect))
    },
    SET_TOTAL_SELECT(state){
      state.totalselect=!state.totalselect
      if(state.totalselect==true){
        state.listData.map(item=>{
            item