Vuex中的Getter的使用

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