vuex-todolist（日程表失败案例）

序：接续前面日程表案例https://blog.csdn.net/weixin_45799003/article/details/114760856和https://blog.csdn.net/weixin_45799003/article/details/114823394。
1.首先新建项目lk-vuex-todo，制作如下界面，文件内容参考上面链接的案例。
2.vue add vuex添加配置VUEX组件，npm install，npm run serve打开。添加如下几个文件：

新版的安装完vuex之后，会有store文件夹和一个index.js文件，总体而言就是把index.js里面的内容拆分成几个小部分。

//本内容为index.js里面的。VUEX核心管理模块，Store对象
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
})

3.第一步：把原来App.vue里面的data()放到state.js里面。
state.js是一个状态对象模块，具体内容如下所示：

import localStorageUtil from "../utils/localStorageUtil";
export default {
    todos:localStorageUtil.readTodos()
}

第二步：mutations.js里面的内容如下所示：

//同步更新状态方法  对象模块 （把界面上的关于数据的操作挪到store里面去）
import {ADD_TODO,DELETE_TODO,SELECT_ALL_TODO,DELETE_FINISHED_TODO} from './mutations-type'
export default {
    //[]引用变量，add_todo才是方法名。
    [ADD_TODO](state,{todo}){
        //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
        state.todos.unshift(todo);
    },
    [DELETE_TODO](state,{index}){
        state.todos.splice(index,1)
    },
    [SELECT_ALL_TODO](state,{isCheck}){
        state.todos.forEach(todo =>{
            todo.finished = isCheck;
        })
    },
    [DELETE_FINISHED_TODO](state){
        state.todos = state.todos.filter(todo=> !todo.finished)
    }
}

第三步：mutations-type.js里面代码内容如下：

//本文件内的内容主要约束mutations和state里面的变量。
//包含多个mutations中方法名称的常量。
export const ADD_TODO = 'add_todo';                          //添加todo
export const DELETE_TODO = 'delete_todo';                    //删除todo
export const SELECT_ALL_TODO = 'select_all_todo';            //全选/取消全选todo
export const DELETE_FINISHED_TODO = 'delete_finished_todo';  //消除已完成的todo

第四步：actions.js里面代码内容如下：

// 包含多个间接更新state的方法 对象模块
import {ADD_TODO,DELETE_TODO,SELECT_ALL_TODO,DELETE_FINISHED_TODO} from './mutations-type'
export default {
    //addTodo是actions里面额外设置的名称。
    addTodo({commit},todo){
        commit(ADD_TODO,{todo});
    },
    delTodo({commit},index){
        commit(DELETE_TODO,{index});
    },
    selectedAllTodo({commit},isCheck){
        commit(SELECT_ALL_TODO,{isCheck});
    },
    delFinishedTodos({commit}){
        commit(DELETE_FINISHED_TODO);
    }
}

第五步：getter.js里面的内容如下：

//服务于state，比如，state里面有些属性需要计算得来。
//getters是基于派生，所以前面在computed里面间接产生的数据可以放到这个里面去。
export default {
    //任务总数量
    todosCount(state){
        return state.todos.length;
    },
    //已经完成的任务数量
    finishedCount(state){
        return state.todos.reduce((total, todo)=>total + (todo.finished ? 1: 0),0);
    },
    //判断是否全选，isCheck原来是个拥有get和set属性或者方法的computed，但是现在放到getters里面就只有写出一个get()里面的？？
    isCheck(state,getters){
        return getters.finishedCount  === getters.todosCount && getters.todosCount > 0;
    }
}

4.相应的文件内容如下：
1）App.vue代码内容如下：

//template里面的组件进行修改
<Header/>
<List/>
<Footer/>

//script里面只有这三个组件
export default {
    name: 'App',
    components: {
      Footer,
      List,
      Header
    },
  }

2）Header.vue里面的修改的地方：

//调用父组件的插入方法
this.$store.dispatch('addTodo',todo);。

3）List.vue里面的代码：

<ul class="todo-main-list">
        <Item
                v-for="(todo,index) in todos"
                :todo="todo"
                :index="index"
        />
</ul>

import {mapState}  from 'vuex';
    import localStorageUtil from "../utils/localStorageUtil";
    export default {
        name: "List",
        components: {Item},
        computed:{
            ...mapState(['todos']),
        },
        //哪个地方获取的，哪个地方去监视。
        watch:{
            todos:{
                deep:true,
                handler:localStorageUtil.saveTodos
            }
        }
    }

4）Item.vue要修改的内容：

delItem(){
     if (window.confirm(`您确认删除${this.todo.title}`)){
          this.$store.dispatch('delTodo',this.index);
          }
}

5）Footer.vue要修改的内容：

<template>
    <div class="todo-footer">
        <label>
            <input slot="isCheck" type="checkbox" v-model="selectedAllOrNot"/>
        </label>
        <span>
            <span slot="finish">已完成{{finishedCount}}件/总计{{todosCount}}件</span>
        </span>
        <button slot="delete" class="btn btn-warning" @click="delFinishedTodos">清除已完成任务</button>
    </div>
</template>

import {mapGetters,mapActions} from 'vuex';
    export default {
        name: "Footer",
        computed:{
            ...mapGetters(['todosCount','finishedCount','isCheck']),
            selectedAllOrNot:{
                get(){
                    return this.isCheck;
                },
                set(value){
                    this.selectedAllTodo(value);
                }
            }
        },
        methods:{
            ...mapActions(['selectedAllTodo','delFinishedTodos']),
        }
    }

5.这个案例本身代码没写全！但是我打算让我自己明白点儿！