App.vue
<template>
<h2>App</h2>
<input type="text" v-model="todo" />
<button @click="add">test</button>
<div class="wrap" v-for="(item,index) in data" :key="index">
{{item}}
<div class="delete" @click="deleteTodo(index)">Del</div>
</div>
</template>
<script lang="ts">
// 引入子级组件Child
import { defineComponent, ref } from 'vue'
import useAppData from './utils/useAppData'
export default defineComponent({
name: 'App',
// 注册组件
setup() {
const {getData,setData}=useAppData()
console.log(getData());
let data=ref(JSON.parse(getData()));
const todo=ref("");
const add=():void=>{
data.value.push(todo.value)
setData(data.value);
}
const deleteTodo=(index:number):void=>{
data.value.splice(index,1);
setData(data.value)
}
return {
data,
todo,
add,
deleteTodo
}
},
})
</script>
<style scoped>
.wrap{
width: 300px;
height: 20px;
border-radius: 5px;
background: #ccc;
margin-top: 10px;
position: relative;
}
.delete
{
position: absolute;
font-size: 10px;
line-height: 19px;
border-radius: 30%;
cursor: pointer;
background:#dc3545 ;
top: 0;
right: 0;
bottom: 0;
}
</style>
useAppData
import { reactive} from 'vue'
const getData=():any=>{
let data=localStorage.getItem("todoList")
if(data)
{
return data;
}
else
{
return []
}
}
const setData=(data:Array<String>)=>{
localStorage.setItem("todoList",JSON.stringify(data));
}
export default function() {
return {getData,setData}
}```