vuex getters-ToDoList

Vuex的属性getters

Vuex的getters其实就是全局的一个computed

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

基本使用

store.js中定义了一个list数组和newlist数组

export default{
    state:{
       list:["东风","西风","南风","北风"],
       newlist :["一万","二万","三万","四万","五万"]
    },
    mutations:{
        add(state){
            let idx = parseInt(Math.random() * state.newlist.length)
            state.list.push(state.newlist[idx])
        }
    },
    getters:{
        getListLength(state){
            return state.list.length
        }
    }
}

定义一个getters，返回的是当前的state.list的长度

可以在任意一个组件中使用这个getters

app.vue

<template>
  <div>
    <ul>
      <li v-for="(item,index) in $store.state.list" :key="index">
        {{item}}
      </li>
    </ul>
    <h1>麻将的数量是：{{$store.getters.getListLength}}</h1>
    <button @click="add"> 点击怎加长度</button>
  </div>
</template>
<script>
  export default {
    methods:{
      add(){
        this.$store.commit("add")
      }
    }
  }
</script>

初始效果

点击之后 值实时更新

ToDoList 参考网站 http://www.todolist.cn/

效果图

app.vue

<template>
  <div>
    <Bd></Bd>
    <Hd></Hd>
  </div>
</template>
<script>
import Bd from './components/Bd'
import Hd from './components/Hd'
export default {
  components:{
    Bd,Hd
  }
}
</script>
<style>
</style>

BdItem.vue

<template>
  <div>
      <h1 :class="{'cur':item.done}">
          <input type="checkbox" v-model="done">
          <span @dblclick="changeShow" v-if="show">{{item.title}}</span>
          <input v-else type="text" v-model="value" @blur="changeTitle(value)">
          <b :class="{'cur':item.done}" @click="delTodos">-</b>
      </h1>
  </div>
</template>
<script>
export default {
    props:{
        item:{
            type:Object,
            default: ()=>{
                return {}
            }
        }
    },
    data(){
        return{
            show:true,
            value:this.item.title
        }
    },
    methods:{
       delTodos(){
           this.$store.commit('delTodos',{
               'id':this.item.id
           })
       },
       changeShow(){
           this.show = false
       },
       changeTitle(str){
           this.show = true
           this.$store.commit('changeTitle',{
               'id':this.item.id,
               'title':str
           })
       }
    },
    computed:{
        done:{
            get(){
               return this.item.done
            },
            set(v){
                this.$store.commit('changeDone',{
                    'id': this.item.id,
                    'done' :v 
                })
            }
        }
    }
}
</script>

<style>
    h1{
        width: 500px;
        border: 1px solid #ddd;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        border-radius: 4px;
    }
    h1 span{
        font-size: 18px;
        color: #4a4a4a;
        line-height: 50px;
    }
    b{
        width: 20px;
        height: 20px;
        background:red;
        text-align: center;
        line-height: 12px;
        border-radius: 50%;
        color: #fff;
    }
    b.cur{
        background: #999;
    }
    h1.cur{
         background: #ddd;
    }
    input{
        line-height: 48px;
        margin: 0;
        padding: 0;
        text-align: center;
    }
</style>

Bd.vue

<template>
  <div>
      <input type="text" v-model="value" class="add">
      <button @click="addTodo">新增</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            value :''
        }
    },
    methods:{
        addTodo(){
            this.$store.commit('addTodo',{
                'title': this.value
            })
        }
    }
}
</script>
<style>
    .add{
        width: 400px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 0;
        padding: 0;
        line-height: 30px;
        text-indent: 15px;
        text-align: left;
    }
    button{
       
        border:1px solid #ddd;
        line-height: 30px;
        margin: 0 20px;
        padding: 0 30px;
        border-radius: 4px;
        font-size: 12px;
    }
</style>

Hd.vue

<template>
  <div>
      <h3>未完成</h3>
      <BdItem v-for="item in $store.getters.unTodo" :key="item.id" :item='item'></BdItem>
      <h3>已完成</h3>
      <BdItem v-for="item in $store.getters.todo" :key="item.id" :item='item'></BdItem>
  </div>
</template>
<script>
import BdItem from './BdItem'
export default {
    components:{
        BdItem
    }
}
</script>
<style>
</style>

store.js

export default{
    state:{
        todos:[
            {'id':Math.random() * 10,'title':'晨跑','done':false},
            {'id':Math.random() * 10,'title':'早餐','done':true},
            {'id':Math.random() * 10,'title':'上班','done':false},
            {'id':Math.random() * 10,'title':'看电视','done':true},
            {'id':Math.random() * 10,'title':'睡觉','done':false},
        ]
    },
    mutations:{
        //新怎
        addTodo(state,{title}){
            console.log(state,title)
            state.todos.push({'id':Math.random() * 10,title,'done':false})
        },
        //修改状态
        changeDone(state,{id,done}){
            console.log(state,id,done)
            state.todos = state.todos.map((item) => item.id == id ? {...item,done} : item)
        },
        //删除
        delTodos(state,{id}){
            state.todos = state.todos.filter(item => item.id !== id)
        },
        //修改title
        changeTitle(state,{id,title}){
            state.todos = state.todos.map((item) => item.id == id ? {...item,title} : item)
        }
    },
    getters:{
        //已做的和未做的
        todo(state){
            return state.todos.filter(item => item.done);
        },
        unTodo(state){
            return state.todos.filter(item => !item.done);
        }
    }
}