📖Vuex 添加任务表单小练习

前言

利用 Vuex 制作的一个任务添加表单，功能如下

1：其中有着可筛选未完成与已完成任务

2：可添加新任务

3：可清除已完成的任务

4：显示还剩多少个未完成任务

5：可删除指定任务

整体代码展示

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
  	count:1,
    //任务总结
    rw_array:[],
    //显示的状态
    rw_disp:'quan',
  },mutations:{
    add_rw_ary(state,obj){
      //添加任务
      state.rw_array.push(obj);
      console.log(state.rw_array)
    },
    delete_rw_ary(state,num){
      //删除任务
      for(let i=0;i<state.rw_array.length;i++){
        if(state.rw_array[i].id == num){
          state.rw_array.splice(i,1);
        }
      }
    },
    update_name(state,txt){
      //更新显示的状态
      state.rw_disp = txt;
    },
    upda_ary(state,num){//任务完成与未完成模块
      for(let i=0;i<state.rw_array.length;i++){
        if(state.rw_array[i].id == num){
            state.rw_array[i].rw_zt = true;
            state.rw_array[i].rw_true = 'yes';
        }
      }
    },
    delete_rw(state){//删除已完成模块
      state.rw_array=state.rw_array.filter(x => !x.rw_zt)
    }
  },
  actions:{
  },
  getters:{
    show_arry:function(state) {
      //根据不同状态返回不同的数据
      if(state.rw_disp == 'quan'){
        return state.rw_array;
      }
      if(state.rw_disp == 'yes'){//已完成
        return state.rw_array.filter(x => x.rw_zt)
      }
      if(state.rw_disp == 'no'){//未完成
        return state.rw_array.filter(x => !x.rw_zt)
      }
    },
    show_rw_true:function(state){
      return state.rw_array.filter(x => !x.rw_zt).length;
    }
  }
})

export default store

//index.vue
<template>
  <div>
    <div class="container">
     <div class="row">
        <h3 class="text-primary">添加信息</h3>    
          <div class="form-group">
              <input type="text" class="form-control" id="firstname" placeholder="任务名" v-model='name'>
              <button type="submit" class="btn btn-default" @click='add_rw'>添加</button>
          </div>

          <div class="panel panel-success">
            <div class="panel-heading">
              <h3 class="panel-title">任务列表</h3>
            </div>
            <div class="panel-body" v-for='list in $store.getters.show_arry'>
              <p>
                <input type="checkbox" v-model.trim='list.rw_zt' @click='upda_ary(list.id)'>
                {{list.name}}
                <a href="javascript:;" @click='dele(list.id)'>删除</a>
              </p>
            </div>
            <div class="panel-footer">
              <span class="label label-success">还剩 {{$store.getters.show_rw_true}} 个未完成</span>
                <div class="btn-group">
                  <button type="qb" class="btn btn-default" 
                  :class='{"btn-primary":$store.state.rw_disp ==="quan"}'
                  @click='displ("quan")'
                  >全部</button>
                  <button type="yes" class="btn btn-default"
                  :class='{"btn-primary":$store.state.rw_disp ==="no"}'
                   @click='displ("no")'
                  >未完成</button>
                  <button type="no" class="btn btn-default"
                  :class='{"btn-primary":$store.state.rw_disp ==="yes"}'
                   @click='displ("yes")'
                  >已完成</button>
                </div><br>
                <a href="javascript:;" @click='delete_rw'>清除已完成</a>
            </div>
          </div>
     </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'vuex_lx_index',
  data(){
    return {
      //设置任务名长度
      name_leng:3,
      //任务名
      name:'',
      //任务ID
      id:0,
      //任务完成情况
      rw_true:'no',
      //选中任务
      rw_zt:false,
      //完成的任务
    }
  },
  methods:{
    add_rw:function(){//点击添加
      if(this.name.length <this.name_leng){
        alert('请正确输入任务名！必须大于 '+this.name_leng+' 个字符！')
      }else{
        this.id++;
        let new_obj = new Object;
        new_obj.name = this.name;
        new_obj.id = this.id;
        new_obj.rw_true = this.rw_true;
        new_obj.rw_zt = this.rw_zt;
        this.$store.commit('add_rw_ary',new_obj);
        this.name =''
      }
    },
    dele:function(num){//删除
      this.$store.commit('delete_rw_ary',num);
    },
    displ:function(txt){
      this.$store.commit('update_name',txt);
      this.$store.getters.show_arry;
    },
    upda_ary:function(num){//勾选已完成
      let quanx = event.target.checked;
      if (quanx) {
        this.$store.commit('upda_ary',num);
      }
    },
    delete_rw:function(){
      this.$store.commit('delete_rw')
    }
  }
}
</script>
<style scoped>
.row{
  width: 40%;
margin: 0 auto;
}
.form-control{
  width:80%;
  float:left;
}
.btn-default{
  width:18%;
  float:left;
  margin-left:2%;
}
.form-group{
  display: inline-block;
width: 100%;
}
.label-success{
  float:left;
}
.btn-group{
  width: 71%;
}
.btn-group button{
  width:33%;
}
.panel-body{
  text-align:left;
}
.panel-body input{
float:left;
margin-right:2%;
margin-top:0;
height: 20px;
}
.panel-body a{
float:right
}
</style>

练习图片

总结

:class='{"btn-primary":$store.state.rw_disp ==="no"}'  判断当前页面显示状态

state.rw_array.filter(x => !x.rw_zt).length;	//.filter()返回数组中符合条件的所有元素