todoList案例（vue版本）（vuex实现）

本篇使用vuex实现todoList案例。

代码涉及的主要文件有

1. main.js，即入口文件
2. store/index.js
3. components/Header.vue，即Header组件
4. components/List.vue，即List组件
5. components/Item.vue，即Item组件
6. components/Footer.vue，即Footer组件

main.js（入口文件）

import Vue from 'vue'
import App from './App.vue'
import store from "./store";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

store/index.js

import Vue from "vue";
import Vuex, { Store } from "vuex";

Vue.use(Vuex);

const state = {
    todos:[
        {id:"001",title:"吃饭",done:true},
        {id:"002",title:"睡觉",done:true},
        {id:"003",title:"打豆豆",done:false},
    ]
}

const getters = {
    total(state){
        return state.todos.length;
    },
    doneTotal(state){
        return state.todos.reduce((pre,todo) => { return pre + (todo.done ? 1 : 0)}, 0)
    },
    isAllChecked(state,getters){
        return  getters.total > 0  && getters.total === getters.doneTotal
    }
}

const actions = {}

const mutations = {
    ADD_TODO(state,todoObj){
        state.todos.unshift(todoObj);
    },
    CHECK_TODO(state,id){
        state.todos.forEach(todo => {
            if(todo.id === id) todo.done = !todo.done;
        })
    },
    DELETE_TODO(state,id){
        state.todos = state.todos.filter(todo => todo.id !== id);
    },
    CHECK_ALL_TODO(state,done){
        state.todos.forEach(todo => todo.done = done);
    },
    CLEAR_ALL_TODO_DONE(state){
        state.todos = state.todos.filter(todo => !todo.done);
    }
}

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

Header.vue（Header组件）

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="handleKeyup"/>
  </div>
</template>

<script>
import {nanoid} from "nanoid"
export default {
    name:"Header",
    methods:{
      handleKeyup(event){
        if(!event.target.value.trim()) return;
        const todoObj = {
          id:nanoid(),
          title:event.target.value,
          done:false
        }
        this.$store.commit("ADD_TODO",todoObj);
        event.target.value = "";
      }
    }
}
</script>

<style scoped>
  .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }

  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  }
</style>

List.vue（List组件）

<template>
    <ul class="todo-main">
        <Item v-for="todo in todos" :key="todo.id" :todo="todo"/>
    </ul>
</template>

<script>
import {mapState} from "vuex";
import Item from "./Item.vue";

export default {
    name:"List",
    components:{Item},
    computed:{
        ...mapState(["todos"])
    }
}
</script>

<style scoped>
    .todo-main {
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
</style>

Item.vue（Item组件）

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="handleChange(todo.id)"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleClick(todo.id)">删除</button>
    </li>
</template>

<script>
import {mapMutations} from "vuex";
export default {
    name:"Item",
    props:["todo"],
    methods:{
        ...mapMutations({
            handleChange:"CHECK_TODO"
        }),
        handleClick(id){
            if(confirm("确定删除吗？")){
                this.$store.commit("DELETE_TODO",id);
            }
        }
    }
}
</script>

<style scoped>
    li {
	    list-style: none;
	    height: 36px;
	    line-height: 36px;
	    padding: 0 5px;
	    border-bottom: 1px solid #ddd;
    }

    li label {
	    float: left;
	    cursor: pointer;
    }

    li label li input {
	    vertical-align: middle;
	    margin-right: 6px;
	    position: relative;
	    top: -1px;
    }

    li button {
	    float: right;
	    display: none;
	    margin-top: 3px;
    }

    li:before {
	    content: initial;
    }

    li:last-child {
	    border-bottom: none;
    }

    li:hover{
        background: #eee;
    }
    
    li:hover button{
        display: block;
    }
</style>

Footer.vue（Footer组件）

<template>
    <div class="todo-footer"  v-show="total">
        <label>
        <input type="checkbox" :checked="isAllChecked" @change="handleChange($event.target.checked)"/>
        </label>
        <span>
        <span>已完成{{doneTotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="handleClick">清除已完成任务</button>
    </div>
</template>

<script>
import {mapGetters,mapMutations} from "vuex";
export default {
    name:"Footer",
    computed:{
        ...mapGetters(["total","doneTotal","isAllChecked"])
    },
    methods:{
        ...mapMutations({
            handleChange:"CHECK_ALL_TODO",
            handleClick:"CLEAR_ALL_TODO_DONE"
        })
    }
}
</script>

<style scoped>
    .todo-footer {
	    height: 40px;
	    line-height: 40px;
	    padding-left: 6px;
	    margin-top: 5px;
    }

    .todo-footer label {
	    display: inline-block;
	    margin-right: 20px;
	    cursor: pointer;
    }

    .todo-footer label input {
	    position: relative;
	    top: -1px;
	    vertical-align: middle;
	    margin-right: 5px;
    }

    .todo-footer button {
	    float: right;
	    margin-top: 5px;
    }
</style>