帮我写个vue3本地存储的案例，功能要求有增删改查

当然，下面是一个简单的Vue3组件示例，展示了如何使用`localStorage`进行数据的增、删、改、查操作。这里假设我们有一个简单的任务列表：

<template>
  <div>
    <input v-model="newTask" placeholder="添加新任务">
    <button @click="addTask">添加</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }} - <button @click="deleteTask(index)">删除</button>
        <!-- 修改按钮在这里，你需要实现修改功能 -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: '',
      tasks: JSON.parse(localStorage.getItem('tasks') || '[]')
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        const updatedTasks = [...this.tasks, this.newTask];
        localStorage.setItem('tasks', JSON.stringify(updatedTasks));
        this.newTask = '';
      }
    },
    deleteTask(index) {
      const updatedTasks = [...this.tasks];
      updatedTasks.splice(index, 1);
      localStorage.setItem('tasks', JSON.stringify(updatedTasks));
    },
    // 这里只是一个基本的get方法，你可以根据需要完善它
    getTaskById(id) {
      return this.tasks.find((task) => task.id === id);
    }
  }
};
</script>

这个例子中，我们在`data`中初始化了任务列表，从`localStorage`读取如果存在的话。`addTask`方法接收用户输入的新任务并将其添加到列表中，同时更新`localStorage`。`deleteTask`方法则是从列表中移除某个任务并同步更新存储。

对于修改功能，由于模板中没有显示，你可以在`deleteTask`方法的`updatedTasks`数组中找到相应的索引位置，然后替换对应的任务内容，之后更新`localStorage`。如果你需要基于ID查询单个任务，可以参考`getTaskById`方法，这只是一个基本的查找函数。

请注意，在实际项目中，为了更好地管理和安全，你应该考虑使用Vuex或其他状态管理库进行数据存储。