vue3+pinia写todolist

你好！对于使用Vue 3和Pinia编写Todolist的问题，我可以提供一些基本的指导。

首先，你需要确保已经安装了Vue 3和Pinia。你可以使用以下命令来安装它们：

npm install vue@next
npm install @pinia/vue@next pinia@next

接下来，你可以创建一个Vue组件来实现Todolist。你可以在组件中设置一个数据属性来存储待办事项列表，并使用v-for指令来遍历列表并渲染每个待办事项。你还可以添加一个表单来允许用户输入新的待办事项，并在提交表单时更新列表。

这是一个简单的Todolist组件示例：

<template>
  <div>
    <h2>Todolist</h2>

    <!-- 渲染待办事项列表 -->
    <ul>
      <li v-for="item in todos" :key="item.id">
        {{ item.text }}
      </li>
    </ul>

    <!-- 表单用于添加新的待办事项 -->
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemText" />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  setup() {
    const store = useStore();

    // 数据属性
    const newItemText = '';

    // 计算属性，获取待办事项列表
    const todos = store.todos;

    // 方法，添加待办事项
    const addItem = () => {
      store.addTodo(newItemText);
      newItemText.value = '';
    };

    return {
      todos,
      newItemText,
      addItem,
    };
  },
});
</script>

在上述示例中，我们使用了Pinia提供的`useStore`函数来获取TodoStore实例，并通过`store.todos`获取待办事项列表。`store.addTodo`用于添加新的待办事项。

需要注意的是，上述代码仅为示例，你需要根据自己的具体需求进行相应的调整和扩展。

希望以上信息能对你有所帮助！如果你还有其他问题，请随时提问。