vue原生实现crud功能
Vue 原生实现 CRUD 功能
在 Vue 中实现基础的 CRUD（增删改查）功能，可以通过组合式 API 或选项式 API 完成。以下是一个基于组合式 API 的完整实现示例，包含数据列表展示、添加、编辑和删除功能。
数据定义与状态管理
import { ref } from 'vue';
const items = ref([
{ id: 1, name: 'Item 1', description: 'Description 1' },
{ id: 2, name: 'Item 2', description: 'Description 2' }
]);
const formData = ref({
id: null,
name: '',
description: ''
});
const isEditing = ref(false);添加/更新数据
const saveItem = () => {
if (isEditing.value) {
const index = items.value.findIndex(item => item.id === formData.value.id);
items.value[index] = { ...formData.value };
} else {
const newId = Math.max(...items.value.map(item => item.id)) + 1;
items.value.push({ ...formData.value, id: newId });
}
resetForm();
};
const editItem = (item) => {
formData.value = { ...item };
isEditing.value = true;
};删除数据
const deleteItem = (id) => {
items.value = items.value.filter(item => item.id !== id);
};表单重置
const resetForm = () => {
formData.value = { id: null, name: '', description: '' };
isEditing.value = false;
};模板示例
<template>
<div>
<form @submit.prevent="saveItem">
<input v-model="formData.name" placeholder="Name" required>
<input v-model="formData.description" placeholder="Description">
<button type="submit">{{ isEditing ? 'Update' : 'Add' }}</button>
<button v-if="isEditing" @click="resetForm">Cancel</button>
</form>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.description }}
<button @click="editItem(item)">Edit</button>
<button @click="deleteItem(item.id)">Delete</button>
</li>
</ul>
</div>
</template>完整组件示例
<script setup>
import { ref } from 'vue';
// 数据状态
const items = ref([...]);
const formData = ref({...});
const isEditing = ref(false);
// 方法
const saveItem = () => {...};
const editItem = (item) => {...};
const deleteItem = (id) => {...};
const resetForm = () => {...};
</script>
<template>
<!-- 表单和列表模板 -->
</template>关键实现要点
-
响应式数据：使用
ref或reactive管理组件状态，确保数据变更自动更新视图。 -
表单绑定：通过
v-model实现表单与数据的双向绑定，简化用户输入处理。 -
条件渲染：利用
isEditing状态切换表单的提交行为（添加/更新）。 -
数组操作：
- 添加使用
push - 更新通过
findIndex定位后替换 - 删除使用
filter
- 添加使用
-
唯一ID生成：通过查找现有最大ID并递增的方式确保新条目ID唯一性。
扩展建议
-
表单验证：可添加
Vuelidate或手动验证逻辑提升数据完整性。 -
持久化存储：结合
localStorage或后端API实现数据持久化。 -
组件拆分：将列表和表单拆分为子组件提高可维护性。
-
状态管理：复杂场景可考虑使用
Pinia集中管理CRUD状态。
该实现展示了Vue核心功能如何组合完成基础CRUD操作，可根据实际需求进行扩展和优化。
