Vuex的getters实现学生查询
时间: 2024-03-23 08:38:26 浏览: 22
好的,您想要实现学生查询功能,可以使用Vuex的getters来获取学生列表,并且可以根据不同的条件进行筛选。以下是一个简单的实现示例:
```javascript
// store.js
const store = new Vuex.Store({
state: {
students: [
{ id: 1, name: '张三', age: 18, gender: '男' },
{ id: 2, name: '李四', age: 19, gender: '女' },
{ id: 3, name: '王五', age: 20, gender: '男' },
// 其他学生信息
]
},
getters: {
getStudents: (state) => (params) => {
// params为查询条件,可以是一个对象,例如 { gender: '男', age: 20 }
if (!params) {
return state.students
} else {
return state.students.filter((student) => {
for (let key in params) {
if (student[key] !== params[key]) {
return false
}
}
return true
})
}
}
}
})
```
在上面的代码中,我们定义了一个名为`getStudents`的getter,它接受一个参数`params`,这个参数可以是一个对象,用于指定查询条件,例如`{ gender: '男', age: 20 }`,表示查询性别为男,年龄为20岁的学生列表。如果`params`为空,则返回所有学生列表。
在getter内部,我们使用了`filter`方法来根据条件筛选学生。具体实现是遍历所有学生,对于每个学生,都检查它的属性是否与查询条件匹配,如果匹配,则保留该学生,否则排除该学生。最终,我们返回一个新的学生数组,其中包含符合条件的学生列表。
在组件中使用该getter可以像这样:
```javascript
// StudentList.vue
<template>
<div>
<ul>
<li v-for="student in students" :key="student.id">
{{ student.name }}({{ student.gender }},{{ student.age }}岁)
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
students () {
return this.$store.getters.getStudents({ gender: '男', age: 20 })
}
}
}
</script>
```
在上面的代码中,我们使用了`computed`属性来获取学生列表,调用了`getStudents`getter,并且传入了查询条件`{ gender: '男', age: 20 }`。最终,我们在模板中渲染了符合条件的学生列表。
希望这个示例能够帮助您实现学生查询功能。