vuex-getters的使用

4月

本文最后更新于2022年09月23日，已经过了965天没有更新，若内容或图片失效，请留言反馈

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

Getter的基本使用

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

text 代码:

  //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岁的学生

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

text 代码:

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

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

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

text 代码:

  
  //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 作为第二个参数：

text 代码:

  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时获取的是一个函数
在函数中接受参数，并做处理

text 代码:

  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>