1，创建 stores 文件夹，在其目录下分别创建 state actions mutations getters mutation-types 模块，以及集成这些模块向外暴露 store 对象的 index.js 模块
① index.js
② state.js
2，完成 添加 todo
① mutation-types.js，mutations 常量模块
② actions.js
将 todo 作为包装为一个对象传给 mutataion 时
若直接将 todo 传给 mutation
③ mutations.js
④ 编写完 store 对象，在 main.js 中注册
⑤ 组件中使用 $store 对象的数据
todoHeader.vue
todoList.vue
添加一个 todo 后
3，完成删除 todo
① mutataion-types.js
② actions.js
③ mutations.js
④ todoItem.vue
4，已完成 和 全部 数据渲染
getters.js
是否全选事件完成
① mutation-types.js
② actions.js
③ mutations.js
④ todoFooter.vue
5，清除已完成任务
① mutataion-types
② actions.js
③ mutation.js
④ todoFooter.vue
6，使用 mapState，mapGetters，mapActions 将 store 对象属性映射到 组件对象上。
todoHeader.vue
<template>
<div class="todo-header">
<input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="handleAdd" v-model="input_todo" />
</div>
</template>
<script>
export default {
data: function () {
return {
input_todo:""
};
},
methods: {
handleAdd() {
//得到输入的数据
this.input_todo=this.input_todo.trim()
//检查合法性
if(!this.input_todo){
alert("请输入");
return;
}
let todo={
isComplete:false,
title:this.input_todo
}
//PubSub.publish("add", todo);
this.$store.dispatch('addTodo',todo)
//清空输入框
this.input_todo = "";
},
},
};
</script>
todoList.vue
<template>
<ul class="todo-main">
<todoItem v-for="(todo,index) in todos" :key="index" :todo="todo" :index="index"/>
</ul>
</template>
<script>
import todoItem from './todoItem'
import { mapState } from 'vuex';
export default {
computed:{
...mapState(['todos'])
},
components:{
todoItem
},
};
</script>
todoItem.vue
<template>
<li :style="{background:isShowDel?'#ccc':'#fff'}"
@mouseenter="mouseEnter(true)" @mouseleave="mouseEnter(false)">
<label>
<input type="checkbox" v-model="todo.isComplete"/>
<span>{{todo.title}}</span>
</label>
<button class="btn btn-danger" v-show="isShowDel" @click="handleDel">删除</button>
</li>
</template>
<script>
export default {
props:{
todo:Object,
index:Number
},
data:function(){
return {
isShowDel:false,
}
},
methods:{
mouseEnter(value){
if(value){ //鼠标移入事件
this.isShowDel=true;
}
else{//鼠标移出事件
this.isShowDel=false
}
},
handleDel(){
if(window.confirm(`确定删除${this.todo.title}吗`)){
this.$store.dispatch('delTodo',this.index)
}
}
}
};
</script>
todoFooter.vue
<template>
<div class="todo-footer">
<label>
<input type="checkbox" v-model="checkAll"/>
</label>
<span>
<span>已完成{{hasCompleteNum}}</span> / 全部{{totalNum}}
</span>
<button class="btn btn-danger" v-show="hasCompleteNum" @click="delAllCompleted">清除已完成任务</button>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
computed:{
...mapGetters(['totalNum','hasCompleteNum']),
//控制全选按钮是否选中
checkAll:{
get(){ //是否勾选
return this.hasCompleteNum==this.totalNum&& this.totalNum>0
},
set(value){ //点击全选checkbox，value时当前checkbox的选中状态
this.$store.dispatch('selectAll',value);
}
}
},
methods:{
delAllCompleted(){
if(window.confirm('确定清除已完成的吗?')){
this.$store.dispatch('delAllCompleted')
}
}
}
};
</script>