Vuex中的Getters详解

一、 使用场景

• 有时候，我们需要从store中获取（派生）一些state变异后的状态，比如下面的Store中：

• 问题：获取学生年龄大于20的个数。

JavaScript

const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id: 110, name: 'cyz', age: 18},
      {id: 111, name: 'kobe', age: 23},
      {id: 112, name: 'james', age: 30},
      {id: 113, name: 'curry', age: 10}
    ]
  }
})

• 可以使用计算属性：利用filter()函数过滤数据

JavaScript

computed: {
    more20stu() {
      return this.$store.state.students.filter(s => s.age > 20)
    }
  }

• 如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

二、Getters的基本使用

• Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• Getter 接受 state 作为其第一个参数：

JavaScript

const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id: 110, name: 'cyz', age: 18},
      {id: 111, name: 'kobe', age: 23},
      {id: 112, name: 'james', age: 30},
      {id: 113, name: 'curry', age: 10}
    ]
  },
  getters: {
    more20stu(state) {
      return state.students.filter(s => s.age > 20)
    }
 }
})

三、Getters通过属性和方法访问（作为参数、传递参数）

• 通过属性访问

• • Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
    Getter 也可以接受其他 getter 作为第二个参数：

  • 如果我们已经有了一个获取所有年龄大于20岁学生列表的getters, 那么我们可以通过属性访问其他getters，比如年龄大于20岁的学生个数

JavaScript

const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id: 110, name: 'cyz', age: 18},
      {id: 111, name: 'kobe', age: 23},
      {id: 112, name: 'james', age: 30},
      {id: 113, name: 'curry', age: 10}
    ]
  },
  getters: {
    more20stu(state) {
      return state.students.filter(s => s.age > 20)
    },
    more20stuLength(state, getters) {
      return getters.more20stu.length
    },
  }
})

• 通过方法访问

• • 你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

  • 比如上面的案例中,我们希望根据传入的年龄参数获取学生信息

Markup

<h2>{{$store.getters.moreAgestu(20)}}</h2>

JavaScript

const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id: 110, name: 'cyz', age: 18},
      {id: 111, name: 'kobe', age: 23},
      {id: 112, name: 'james', age: 30},
      {id: 113, name: 'curry', age: 10}
    ]
  },
  getters: {
    more20stu(state) {
      return state.students.filter(s => s.age > 20)
    },
    more20stuLength(state, getters) {
      return getters.more20stu.length
    },
    moreAgestu(state) {
      // return function (age) {
      //   return state.students.filter(s => s.age > age)
      // }
      return age => {
        return state.students.filter(s => s.age > age)
      }
    }
  }
})

原文：Vuex中的Getters详解 - vue - 乐享WEB技术栈