vue中getters的用法

vue中getters的用法

store文件夹下的index.js文件：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 数据源
    counter:100,
    students:[
      {id:0,name:'张三',age:80},
      {id:1,name:'李四',age:24},
      {id:2,name:'李亚亚',age:61},
      {id:3,name:'黄五',age:50},
    ]
  },
  getters:{
  //  储存编译后的数据
    more60(state){
      return state.students.filter(s=>s.age>60)
    },
    /**  虽能实现但不是正确写法
    more60length(state){
       return state.students.filter(s=>s.age>60).length
    }
    **/
    more60length(state,getters){
      return getters.more60.length
    },
    moreAge(state){
      return function (age) {
        return state.students.filter(s=>s.age>age)
      }
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
    <div>
        <h2>cpn1</h2>
        <h3>{{$store.state.students}}</h3>
        <h2>大于70岁{{more70}}</h2>
        <h1>{{more70[0].age}}</h1>
        <h2>大于60岁{{$store.getters.more60}}</h2>
        <h2>大于60岁有--{{$store.getters.more60length}}--个人</h2>
        //传递参数
        <h2>大于？岁的显示{{$store.getters.moreAge(40)}}</h2>
    </div>
</template>

<script>
    export default {
        name: "Cpn1",
        computed:{
            more70(){
                return this.$store.state.students.filter(s=>s.age>70)
            }
        },
        methods:{
        }
    }
</script>

<style scoped>

</style>