vuex结合getters以及动态传值
vuex结合getters以及动态传值
获取年龄大于${age}的学生
<div><input type="text"
v-model="age"
placeholder="请输入年龄"></div>
<div v-for="item in moreAgeStu(age)"
:key="item.id">
{{item.name}}----{{item.age}}
</div>
import { mapGetters } from "vuex";
const data = {
age: 18,
};
const computed = {
...mapGetters({
moreAgeStu: "moreAgeStu",
}),
};
//store.js
const state = {
students: [
{ id: 1, name: '张三', age: 16 },
{ id: 2, name: '李四', age: 19 },
{ id: 3, name: '王五', age: 20 },
{ id: 4, name: '赵六', age: 21 },
]
}
//getters.js
moreAgeStu (state, getters) {
return function (age) {
return state.students.filter(s => s.age >= age)
}
}
注:以上内容仅用于日常学习