vue3做todolist案例回车添加，兄弟组件，需要本地存储

Vue3中做一个Todo List的例子，我们可以使用Vuex管理状态，Vuetify作为UI库，并结合Element Plus提供一些常用组件。下面是基本步骤：

1. **项目初始化**：
使用`vue create todo-app`创建一个新的Vue3项目。

2. **安装依赖**：
安装Vue Router、Vuex、Element Plus等必要库：

   npm install vuex vuetify @element-plus/vue

3. **创建store**：
在`src/store/index.js`中设置初始状态和mutation，比如：

   import Vue from 'vue'
   import Vuex from 'vuex'

   const state = {
     todos: [],
   }

   const mutations = {
     addTodo(state, text) {
       state.todos.push({ text, completed: false });
     },
   };

   export default new Vuex.Store({
     state,
     mutations,
   });

4. **TodoList组件**：
- 创建`components/TodoList.vue`，监听输入事件添加任务并保存到本地存储（例如使用浏览器的localStorage）：

   <template>
     <v-card>
       <v-textarea
         v-model="newTodo"
         @input="addTodoToLocalStorage"
         placeholder="添加新的待办事项..."
       ></v-textarea>
       <v-list>
         <v-list-item
           v-for="(todo, index) in todos"
           :key="index"
           :class="{ done: todo.completed }"
         >
           <v-list-tile-content>
             <v-icon @click="toggleTodo(index)">done</v-icon>
             {{ todo.text }}
           </v-list-tile-content>
         </v-list-item>
       </v-list>
     </v-card>
   </template>

   <script>
   import { mapState } from "vuex";
   export default {
     computed: {
       ...mapState(["todos"]),
     },
     methods: {
       addTodoToLocalStorage(text) {
         localStorage.setItem('todos', JSON.stringify(this.todos));
         this.addTodo(text);
       },
       toggleTodo(index) {
         // 根据索引修改todo的completed状态
       }
     },
     data() {
       return {
         newTodo: '',
       };
     },
   };
   </script>

5. **兄弟组件**：
如果有其他兄弟组件想访问Todo List的状态，可以通过Vue实例的$store来获取，或者使用provide/inject方式传递数据。

6. **路由配置**：
在`src/router/index.js`中配置路由，让TodoList组件成为可导航的页面。

注意：这只是一个基础示例，实际应用中可能还需要处理错误情况，如localStorage的读取异常，以及更复杂的列表操作（如删除、排序）。