nuxt数据库之增删改查，父组件子组件传值

nuxt学到数据库这里，就涉及到响应数据，父组件向子组件传值，子组件向父组件传值，最终还是需要掌握vue3的组件知识了。学习真的是一个长期的过程，不管学习了什么知识，有多少，都应该及时的记录下来，这个记录的过程，就是不断巩固自身知识的过程。之前学习其他框架的时候，不用，过两天就忘记了，当许多插件解决问题，忘记这个插件名字后，那想不起来的时候就特别痛苦了。好记忆不如烂笔头，及时记录下来吧。

ui.nuxt.com中的form章节，有很多实例代码：Form - Nuxt UI

还有，github上有很多样例代码，比如这个Table的代码： https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue

这个Table例子看了好多遍，代码还是掌握不了啊，感觉有点难啊。Table - Nuxt UI

还是根据table上面的简单的例子，做一些修改吧，从简单的入手。

首先接着之前的文章，把drizzle orm的增删改查等做成对应的api接口路由。https://hub.nuxt.com/docs/recipes/drizzle#usage

读：select

server/api/users/index.get.ts

export default eventHandler(async () => {
  const todos = await useDrizzle().select().from(tables.users).all()

  return todos
})

增:insert

server/api/users/index.post.ts

export default eventHandler(async (event) => {
  const { name, email, password, avatar, createdAt } = await readBody(event);
  const todo = await useDrizzle()
    .insert(tables.users)
    .values({
      name,
      email,
      password,
      avatar,
      createdAt: new Date(),
    })
    .returning()
    .get();

  return todo;
});

 改:update

server/api/users/[id].patch.ts

export default eventHandler(async (event) => {
  const { id } = getRouterParams(event);
  const { completed } = await readBody(event);

  const todo = await useDrizzle()
    .update(tables.users)
    .set({
      completed,
    })
    .where(eq(tables.users.id, Number(id)))
    .returning()
    .get();

  return todo;
});

 删:delete

server/api/users/[id].delete.ts

export default eventHandler(async (event) => {
  const { id } = getRouterParams(event);

  const deletedTodo = await useDrizzle()
    .delete(tables.users)
    .where(and(eq(tables.users.id, Number(id))))
    .returning()
    .get();

  if (!deletedTodo) {
    throw createError({
      statusCode: 404,
      message: 'User not found',
    });
  }
  return deletedTodo;
});

读取的时候，都是一次性的把数据全部select出来&#