vuex - getters的基本使用

vuex中的getters类似于计算属性，用例子来学习getters的使用方法。

例子一：

在state中定义一个学生信息的数组，获取所有年龄大于20岁的学生信息

学生信息

state: {
    counter: 0,
    students: [{
        number: 100,
        name: 1,
        age: 18
      },
      {
        number: 101,
        name: 2,
        age: 20
      },
      {
        number: 103,
        name: 3,
        age: 32
      },
      {
        number: 104,
        name: 4,
        age: 10
      },
      {
        number: 105,
        name: 5,
        age: 100
      }
    ]
  },

使用getters获取所有年龄大于20岁的学生

getters: {
    getStudents(state) {
      return state.students.filter(s => s.age > 20)
    },
  },

使用

<h3>{{$store.getters.getStudents}}</h3>

结果

例子二：

获取年龄大于20的学生的个数

方法一：

getStudentsLength(state) {
      return state.students.filter(s => s.age > 20).length
    },

方法二：

getters可以作为参数传递

  getStudentsLenght(state, getters) {
      return getters.getStudents.length
    }

例子三：

根据用户传入的年龄，获取所有大于该年龄的学生信息

getters中

getStudentsT(state) {
      return function (age) {
        return state.students.filter(s => s.age > age)
      }
    }

使用

<h3>{{$store.getters.getStudentsT(80)}}</h3>

结果