用vue3写一个增删改查的界面组件

在 Vue 3 中创建一个通用的增删改查 (CRUD) 组件，你需要首先确保已经设置了 Vue 的状态管理工具（如 Vuex），然后使用 Vue Router 进行页面之间的导航。这里是一个简化版的步骤示例：

1. **数据模型 (Model)**: 创建一个数据模型表示你要操作的对象，例如 `User`:

// vuex store
export const state = () => ({
  users: [],
});
export const mutations = {
  setUserList(state, userList) {
    state.users = userList;
  },
  addUser(state, newUser) {
    state.users.push(newUser);
  },
  updateUser(state, id, updatedUser) {
    const index = state.users.findIndex(u => u.id === id);
    if (index > -1) {
      state.users[index] = updatedUser;
    }
  },
  deleteUser(state, id) {
    const index = state.users.findIndex(u => u.id === id);
    if (index > -1) {
      state.users.splice(index, 1);
    }
  },
};

2. **列表视图 (ListView)**: 显示所有用户的列表，并提供分页、搜索功能：

<template>
  <div>
    <!-- 省略样式 -->
    <table>
      <tr v-for="user in filteredUsers" :key="user.id">
        <!-- 表格列显示用户信息 -->
        <td>{{ user.name }}</td>
        <!-- 添加删除、编辑按钮 -->
        <td><button @click.prevent="deleteUser(user.id)">删除</button></td>
        <td><button @click.prevent="editUser(user.id)">编辑</button></td>
      </tr>
    </table>
    <!-- 分页或搜索框 -->
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['users']),
    filteredUsers() {
      // 这里可以根据需求过滤或排序用户列表
      return this.users;
    },
  },
  methods: {
    deleteUser(id) {
      dispatch('deleteUser', id);
    },
    editUser(id) {
      // 导航到编辑用户页面，或展示模态框
      router.push(`/edit/${id}`);
    },
  },
};
</script>

3. **添加/编辑视图 (EditView)**: 提供用户输入数据并保存的表单：

<template>
  <form @submit.prevent="saveUser">
    <!-- 输入字段 -->
    <input type="text" v-model="userForm.name" />
    <!-- 删除按钮 -->
    <button type="button" @click="cancel">取消</button>
    <button type="submit">保存</button>
  </form>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  props: ['userId'],
  data() {
    return {
      userForm: {},
    };
  },
  computed: {
    ...mapState(['users']),
    user() {
      return this.users.find(u => u.id === this.userId);
    },
  },
  methods: {
    saveUser() {
      dispatch('updateUser', this.userId, this.userForm);
      router.back();
    },
    cancel() {
      // 清空表单或返回前一个页面
      this.userForm = {};
    },
  },
};
</script>

4. **路由配置**:
- 如果有多个 CRUD 页面，需要配置对应的路由。

完成以上步骤后，你就有了一个基础的 CRUD 操作界面组件。你可以根据实际业务需求调整细节，比如错误处理、验证等。