vue3 todolist 增删改查

**vue3的增删改查 适合刚学习的你看看 里面有setup语法糖 和全局监听watchEffect和全新的computed计算属性   ref,reactive,toRefs等你来一起学习新的方法**
//父组件的逻辑
<template>
    <NavheaderVue @addList="addList"/>
    <NavminaVue   @clearFn="clearFn"  :list="todolist"/>
    <NavactiveVue  :list="list"/>
</template>
<script setup>
import NavheaderVue from '../components/Navheader.vue';
import NavminaVue from '../components/Navmina.vue';
import NavactiveVue from '../components/Navactive.vue';
import {
    useStore } from 'vuex';
import {
    computed,watchEffect } from 'vue';
const ageLocal={
   
     fach(){
   
        const add=JSON.parse(localStorage.getItem('vue-admin-todo')||'[]')
            add.forEach((item,index)=>{
   
                item.id=index+1
            })
            return add
     },
     save(todo){
   
         localStorage.setItem('vue-admin-todo',JSON.stringify(todo))
     }
}
const store=useStore()
store.state.user.list=ageLocal.fach()
const list=computed(()=>{
   
     return store.state.user.list
})
const todolist=computed(()=>{
   
     return store.state.user.todoList
})
const addList=(val)=>{
   
    var flag=true
     list.value.forEach((item)=>{
   
         if(item.title==val){
   
             flag=false
             alert('不能重复添加')
         }
     })
     if(flag){
   
        store.commit('user/addPush',{
   
        id:store