前言
大家好 我是歌谣 今天继续给大家带来一个V3+ts实现的todolist的项目
目录结构
主要代码
TodoInput----index.vue
<template>
<div>
<input type="text" v-model="todoValue" @keyup="setTodoValue"/>
</div>
</template>
<script lang="ts">
import { defineComponent,reactive,ref } from 'vue';
import {IUseTodo, useTodo} from "../../hooks/index"
export default defineComponent({
name:"TodoInput",
setup(){
const todoValue=ref<string>("")
const setTodoValue=(e:KeyboardEvent)=>{
console.log(todoValue.value)
const {setTodo}:IUseTodo=useTodo()
if(e.keyCode===13&&todoValue.value.trim().length){
setTodo(todoValue.value)
todoValue.value=''
}
}
return {
todoValue,
setTodoValue
}
}
})
</script>
<style>
</style>TodoList---index.vue
<template>
<todo-item
v-for="(item, index) of todoList"
:key="item.id"
:item="item"
@removeTodo="removeTodo"
@setStatus="setStatus"
@setDoing="setDoing"
/>
<!-- -->
</template>
<script lang="ts">
import { defineComponent,PropType } from 'vue';
import TodoItem from "./item.vue"
import { ITodo } from '@/typings';
import { useTodo } from '@/hooks';
export default defineComponent({
name: "TodoList",
props:{
todoList:Array as PropType<ITodo[]>
},
components: {
TodoItem
},
setup(props){
const {removeTodo,setStatus,setDoing}=useTodo()
return{
removeTodo,
setStatus,
setDoing
}
}
})
</script>
<style></style>TodoList---item.vue
<template>
<div>
<input type="checkbox" :checked="item?.status === FINISHED" @click="setStatus(item!.id)" />
<span :class="item?.status === FINISHED ? 'line-through' : ''">{{ item?.content }}</span>
<button @click="removeTodo(item!.id)">删除</button>
<button :class="item?.status === DOING ? 'doing' : 'willdo'" @click="setDoing(item!.id)" v-if="item?.status !== FINISHED">{{
item?.status === DOING ? "正在进行...." : "马上做...." }}</button>
</div>
</template>
<script lang="ts">
import { ITodo, TODO_STATUS } from '@/typings';
import { PropType, defineComponent } from 'vue';
interface IStatusState {
DOING: TODO_STATUS,
FINISHED: TODO_STATUS,
WILLDO: TODO_STATUS
}
export default defineComponent({
name: "TodoItem",
props: {
item: Object as PropType<ITodo>
},
setup(props, { emit }) {
const statusState: IStatusState = {
DOING: TODO_STATUS.DOING,
FINISHED: TODO_STATUS.FINISHED,
WILLDO: TODO_STATUS.WILLDO
}
const removeTodo = (id: number): void => {
console.log(111111,"id")
emit("removeTodo", id)
}
const setDoing = (id: number): void => {
emit("setDoing", id)
}
const setStatus = (id: number): void => {
emit("setStatus", id)
}
return {
...statusState,
removeTodo,
setDoing,
setStatus
}
}
})
</script>
<style>
.line-through {
text-decoration: line-through;
}
.doing {
background-color: #ededed;
color: #999;
}
.willdo {
background-color: orange;
color: #fff;
}
</style>hooks---index.ts
import { SET_TODO, SET_TODO_LIST,REMOVE_TODO,SET_TODO_STATUS,SET_DOING_STATUS } from "@/store/actionTypes"
import { ITodo, TODO_STATUS } from "@/typings"
import { Store, useStore } from "vuex"
import _store from "@/store"
import { watch } from "vue"
export interface IUseTodo {
setTodo: (value: string) => void
setTodoList: () => void
removeTodo: (id:number) => void
setStatus: (id:number) => void
setDoing: (id:number) => void
}
interface IUseLocalStorage{
getLocalList:()=>ITodo[],
setLocalList:(todoList:ITodo[])=>void
}
function useTodo(): IUseTodo {
const store: Store<any> = useStore() || _store
const {setLocalList,getLocalList}=useLocalStorage()
const todolist:ITodo[]=getLocalList()
watch(()=>{
return store.state.list
},(todoList)=>{
setLocalList(todoList)
})
function setTodo(value: string): void {
const todo: ITodo = {
id: new Date().getTime(),
content: value,
status: TODO_STATUS.WILLDO
}
store.dispatch(SET_TODO, todo)
}
function setTodoList() {
store.dispatch(SET_TODO_LIST, todolist)
}
function removeTodo(id:number) {
console.log("111111")
store.dispatch(REMOVE_TODO, id)
}
function setStatus(id:number) {
store.dispatch(SET_TODO_STATUS, id)
}
function setDoing(id:number) {
store.dispatch(SET_DOING_STATUS, id)
}
return {
setTodo,
setTodoList,
removeTodo,
setStatus,
setDoing
}
}
function useLocalStorage():IUseLocalStorage {
function getLocalList(): ITodo[] {
return JSON.parse(localStorage.getItem("todoList") || '[]')
}
function setLocalList(todoList: ITodo[]): void {
localStorage.setItem("todoList",JSON.stringify(todoList))
}
return {
getLocalList,
setLocalList
}
}
export {
useTodo
}app.vue
<template>
<div class="warpper">
<todo-input></todo-input>
<todo-list :todo-list="todoList"></todo-list>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue';
import TodoInput from './components/TodoInput/index.vue';
import TodoList from './components/TodoList/index.vue';
import { IUseTodo, useTodo } from './hooks';
import { Store, useStore } from 'vuex';
export default defineComponent({
name: 'App',
components: {
TodoInput,
TodoList
},
setup(){
const {setTodoList}:IUseTodo=useTodo()
const store:Store<any>=useStore()
onMounted(()=>{
setTodoList()
})
return {
todoList:computed(()=>store.state.list)
}
}
});
</script>
<style>
</style>运行结果
