vuex的添加，删除，选中，和vue的组件拆分

1.首先在组件中定义一个enter事件

 <input type="text"
        class="txt"
        v-model="txt"
        @keydown.enter="add"
        />

2.在data中定义双向绑定的内容

data() {
        return {
            txt:""
        };
    },

3.在methods判断数据是否为空，把他传入vuex中

 methods: {
        add(){
            if(this.txt == ""){
                alert('内容不能为空')
                return;
            }
            var o ={
                isCheck:false,
                txt:this.txt
            }
            this.$store.commit('addArr',o)
            this.txt=''
        }
    }

4.在vuex中接收传过来的数据并定义空的数组

 state: {
    arr:[],
    all:false,
  },
  mutations: {
    //添加
    addArr(state,o){
      state.arr.push(o)
    },
    },

5.渲染到页面

<li>
     <input type="checkbox" 
       v-model="item.isCheck"
            @click="$store.commit('checkOne',index)"
            />
         <span>{{item.txt}}</span>
         <button @click="$store.commit('delArr',index)">×</button >
        </li>

1.vuex的删除
1.点击button并把他的index传到vuex中

 <button @click="$store.commit('delArr',index)">×</button >

2.可以在vuex中通过定义的数组删除

mutations: {
 delArr(state,index){
     state.arr.splice(index,1)
    },
}，

1.单选反选
点击单选把他传入vuex中

  <input type="checkbox" 
            v-model="item.isCheck"
            @click="$store.commit('checkOne',index)"
            />

2.在vue想中接收

mutations: {
checkOne(state,index){
     state.arr[index].isCheck =!state.arr[index].isCheck
     state.all=state.arr.every(item=>{
       return item.isCheck == true
     })
   },
   }，

1.vuex的全选
在页面中定义一个checkbox

<input type="checkbox" v-model="$store.state.all" 
            @click="$store.commit('checkall')"
            />

2.在vuex中定义全选的checked

state: {
    all:false,
  },

3.接收

mutations: {
checkall(state){
     state.all =!state.all
     console.log(state.all)
     state.arr.forEach(item=>{
       item.isCheck=state.all
     })
   },
   }，

1.定义vuex总条数，在vuex中写入

 getters:{
    checkNum(state){
      var newArr = state.arr.filter(item=>{
        return item.isCheck == true
      })
      return newArr.length
    }
  },

2.在也面中渲染

总条数{{$store.state.arr.length}}

1.组件拆分
1.新建文件

2.在父组件中注册并引入子组件

<script>
import mylistone from './mylistone'
export default {
    components:{
        mylistone
    },
    data() {
        return {
        };
    },
    created() {
    },
    mounted() {
    },
    methods: {
    }
};
</script>

3.把父组件中的内容复制到子组件中通过poprs接收

<template>
    <div>
        <li>
            <input type="checkbox" 
            v-model="item.isCheck"
            @click="$store.commit('checkOne',index)"
            />
                <span>{{item.txt}}</span>
         
            <button @click="$store.commit('delArr',index)">×</button >
        </li>
    </div>
</template>

<script>
export default {
    props:['item','index'],
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
};
</script>

4.在页面中写入注册的标签

 <mylistone 
        v-for="(item,index) in $store.state.arr"
        :key="index"
        :item="item"
        :index="index"
        />