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)
    }
  }


posted @ 2022-01-06 09:05  Wayhome'  阅读(204)  评论(0编辑  收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css