vuex写todolist

用vuex写一个todolist

这是完整的效果图（里面包含了添加、删除、删除已完成、未完成的数量、全选和取消全选、以及选中后的样式）

看到这个案例我第一步要先划分组件（具体划分请看下图）

这是头部组件的具体内容

<template>
    <div class="header">
        <div class="left">
            <input type="checkbox" v-model="$store.state.istrue" @click="qx"/>
        </div>
        <div class="right">
            <input type="text" placeholder="What needs to be done?" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" v-model="addtext" @keyup.enter="add"/>
        </div>
    </div>
</template>
<script>
export default {
   
    data() {
   
        return {
   
            addtext:"",
        }
    },
    methods:{
   
        add(){
   
            var obj = {
   
                ischecked:false,
                title : this.addtext
            }
            this.addtext=""
            this.$store.commit('add',obj)
        },
        qx(){
   
            this.$store.commit('qx')
        }
    }
}
</script>
<style lang="scss" scoped>
.header{
   
    width: 100%;
    height: 9vh;
    background: #fff;
    box-shadow: 1px 1px 3px #e1e1e1;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    .left{
   
        width: 10%;
        height: 100%;
        background:#fff;
        font-size: 20px;
        line-height: 9vh;
        text-align: center;
    }
    .right{
   
        width: 80%;
        height:100%;
        input{
   
            width: 100%;
            height: 97%;
            outline: none;
            border: none;
            font-size: 30px;
            background: #fff;
            padding-left: 10px;
                color: inherit;
        }
        input::-webkit-input-placeholder {
   
            color: #e1e1e1;
            font-style: oblique;
            font-size: 25px;
        }
    }
}
</style>

这是列表渲染的具体内容

<template>
  <div class="items">
    <Item v-for="(item, index) in arr" :item="item" :index="index" :key = "index"></Item>
  </div>
</template