一、实验要求:
用编程实现列表的增、删、改、查,要求运用vuex的相关知识,写一段增删改查的代码,要求的数据格式是每一串数据包含ID 姓名 性别 年级四个信息。
二、实验结果展示:
1.初始状态:
2.删除:
3.添加:
4.编辑:
三、实验代码展示:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>增删改查</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3"></script>
</head>
<body>
<div id="app">
<!-- 查询输入框和添加按钮 -->
<div>
<input v-model="searchName" placeholder="请输入要查询的名字">
<button @click="addStudent">添加</button>
</div>
<!-- 查询结果显示 -->
<div v-for="student in filteredStudents" :key="student.id"
style="margin-top: 10px; border: 1px solid #ccc; padding: 10px;">
<div>
<span>ID: {{ student.id }}</span>
<span>姓名: {{ student.name }}</span>
<span>性别: {{ student.gender }}</span>
<span>年级: {{ student.grade }}</span>
<button @click="editStudent(student)">编辑</button>
<button @click="deleteStudent(student.id)">删除</button>
</div>
</div>
<!-- 编辑弹窗 -->
<div v-if="showEditModal">
<h3>编辑学生信息</h3>
<div>
<label>姓名: </label>
<input v-model="editedStudent.name">
</div>
<div>
<label>性别: </label>
<select v-model="editedStudent.gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<label>年级: </label>
<select v-model="editedStudent.grade">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<button @click="updateStudent">保存</button>
<button @click="cancelEdit">取消</button>
</div>
</div>
<script>
const store = new Vuex.Store({
state: {
students: [
{ id: 1, name: '张三', gender: '男', grade: '1' },
{ id: 2, name: '李四', gender: '女', grade: '2' },
{ id: 3, name: '王五', gender: '男', grade: '3' },
{ id: 4, name: '赵六', gender: '女', grade: '4' },
],
searchName: '', // 用于存储搜索关键字
showEditModal: false, // 控制编辑弹窗的显示与隐藏
editedStudent: {
id: null,
name: '',
gender: '',
grade: '',
}, // 用于存储当前编辑的学生信息
},
mutations: {
// 添加学生
addStudent(state) {
const newStudent = {
id: state.students.length > 0 ? state.students[state.students.length - 1].id + 1 : 1,
name: '',
gender: '',
grade: ''
};
state.students.push(newStudent);
},
// 编辑学生
editStudent(state, student) {
state.showEditModal = true; // 显示编辑弹窗
// 将当前编辑的学生信息保存到 editedStudent 对象中
state.editedStudent.id = student.id;
state.editedStudent.name = student.name;
state.editedStudent.gender = student.gender;
state.editedStudent.grade = student.grade;
},
// 保存编辑后的学生信息
updateStudent(state) {
const index = state.students.findIndex(student => student.id === state.editedStudent.id);
if (index !== -1) {
// 更新学生信息
state.students[index].name = state.editedStudent.name;
state.students[index].gender = state.editedStudent.gender;
state.students[index].grade = state.editedStudent.grade;
}
state.showEditModal = false; // 隐藏编辑弹窗
},
// 取消编辑
cancelEdit(state) {
state.showEditModal = false; // 隐藏编辑弹窗
// 重置 editedStudent 对象
state.editedStudent.id = null;
state.editedStudent.name = '';
state.editedStudent.gender = '';
state.editedStudent.grade = '';
},
// 删除学生
//:key="student.id" 中的 student.id 是循环中每个学生对象的 id 属性。
//然后,在点击删除按钮时,@click="deleteStudent(student.id)" 语法中的
//student.id 将这个学生对象的 id 传递给 deleteStudent 方法。
deleteStudent(state, studentId) {
// 从学生数组中过滤掉要删除的学生
state.students = state.students.filter(student => student.id !== studentId);
},
},
//在这个 Vuex 的 getter 中,state.searchName 是搜索关键字,
//当搜索框一开始是空的时候,state.searchName 会是一个空字符串 ''。
//在js中,includes 方法检查一个字符串是否包含另一个字符串,
//如果被检查的字符串是空字符串 '',它会返回 true。
//这就意味着当搜索框为空时,student.name.includes(state.searchName) 将对每个学生都返回 true,
//因为空字符串是每个字符串的子集。
getters: {
// 根据搜索关键字过滤学生信息
filteredStudents: state => {
return state.students.filter(student => student.name.includes(state.searchName));
}
}
});
new Vue({
el: '#app',
store,
computed: {
// 从 store 中获取搜索关键字
searchName() {
return this.$store.state.searchName;
},
// 通过 getters 获取过滤后的学生信息
filteredStudents() {
return this.$store.getters.filteredStudents;
},
// 从 store 中获取编辑弹窗的显示状态
showEditModal() {
return this.$store.state.showEditModal;
},
// 从 store 中获取当前编辑的学生信息
editedStudent() {
return this.$store.state.editedStudent;
},
},
methods: {
// 触发添加学生的 mutation
addStudent() {
this.$store.commit('addStudent');
},
// 触发编辑学生的 mutation
editStudent(student) {
this.$store.commit('editStudent', student);
},
// 触发保存编辑后学生信息的 mutation
updateStudent() {
this.$store.commit('updateStudent');
},
// 触发取消编辑的 mutation
cancelEdit() {
this.$store.commit('cancelEdit');
},
// 触发删除学生的 mutation
deleteStudent(studentId) {
this.$store.commit('deleteStudent', studentId);
}
}
});
</script>
</body>
</html>