1、Getter的作用

1、传入一个参数(state)

在getter中接受的第一个参数是Vuex中的state

有时候,我们需要从store中获取一些state变异后的状态

getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    more15stu(state) {
      return state.students.filter(item => item.age > 15);
    }
  },

比如下面的Store中,获取学生年龄大于15的个数

我们可以在Store中定义getters

2、传入两个参数(state,getters)

在getter中接受第两个参数是Vuex中的:state,getters

例如,想知道getters方法中的一个返回值的大小:

 getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    more15stu(state) {
      return state.students.filter(item => item.age > 15);
    },
    more15stuLength(state, getters) {
      return getters.more15stu.length;
    }
  },

3、传入用户需要的参数(返回一个function)

 getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数.

例如下面,需要用户传入一个Age,筛选state.students中大于Age的学生:

getters: {
    moreAgestu(state) {
      //return function (Age) {
      //  return state.students.filter(item => item.age > Age);
      //}
      return Age => {
        return state.students.filter(item => item.age > Age);
      }
    }
  },

参考链接:

https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐