vuex-getters的使用

■Getters 我们可以理解为store仓库的一个计算属性，它的作用主要是用来派生出一些新的状态。比如我们要把state状态的数据进行一次映射或者筛选，再把这个结果重新计算并提供给组件使用。

Getter的基本使用

■在state中有一个数组保存的几个学生对象

  //store\index.js
  state: {
    students:[
      {id:'1',name:'xiu',age:20},
      {id:'2',name:'fan',age:18},
      {id:'3',name:'yuan',age:23},
      {id:'4',name:'liu',age:22}
    ]
  },

■我们需要过滤掉年龄小于20岁的学生

■用以前的方法可以在组件中通过计算属性来过滤

//Home.vue
computed:{
  getStu(){
    return this.$store.state.students.filter(stu => stu.age > 20);
  }
}

■但如果多个组件都需要获取小于20岁的学生，通过计算属性的话会写几遍完全相同的代码，这是没有意义的

■所以我们要通过getters来处理，getters默认将state作为第一个参数

  
  //store\index.js
  getters:{
    getStu:state =>{
      return state.students.filter(stu => stu.age > 20);
    }
  },


//Home.vue
<template>
  <div class="home">
    <h1>this is a home page</h1>
    <h2>{{$store.getters.getStu}}</h2>
  </div>
</template>


//About.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
      <h2>{{$store.getters.getStu}}</h2>
  </div>
</template>

■getter 也可以接受其他 getter 作为第二个参数：

  getters:{
    getStu:state =>{
      return state.students.filter(stu => stu.age > 20);
    },
    getNum:(state,getters) =>{
         return getters.getStu.length;
    }

Getter的传参

■我们可以让getter返回一个函数来给它传参

• 假如我们想要在store.getter.getStu时来决定获取年龄大于多少岁的学生
• 这时候需要一个参数给getter
• 我们可以让getter返回一个函数
• 这样我们在store.getter.getStu时获取的是一个函数
• 在函数中接受参数，并做处理

  getters:{
    getAge(state){
      return function (age){
          state.students.filter(stu => stu.age > age);
      }
    },

      //箭头函数写法
      getAge:state => (age) =>{
          return state.students.filter(stu => stu.age > age);
      },
  }




//Home.vue
<template>
  <div class="home">
    <h1>this is a home page</h1>
    //获取年龄大于18岁的学生
    <h2>{{$store.getters.getAge(18)}}</h2>
  </div>
</template>

其他vuex文章

Vuex概念和作用解析
vuex-mutation同步函数
vuex-getters的使用
vuex-actions异步函数
vuex-modules的使用