getters

1.当需要从store中获取一些state变异后的状态时，可以使用getters，如获取state中的counter的平方值

  state:{
      counter:100
  },
  getters:{
    powerCounter(state){
      return state.counter * state.counter
    }
  }

 <h2>{{$store.getters.powerCounter}}</h2>

获取超过20岁的学生：
store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    students:[
      {id:1,name:'xiaoming',age:18},
      {id:2,name:'dahei',age:21},
      {id:3,name:'qiaodan',age:40},
    ]

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

})
export default store

App.vue

<template>
  <div id="app">
    <div>{{ $store.getters.studentsMore20 }}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  }
}
</script>

getters可以作为参数，供其它getters使用

获取上面代码中年龄大于20岁的长度

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

 <div>{{ $store.getters.studentMore20Length }}</div>

当getters需要传递参数时，可以通过返回一个函数来接收参数

获取年龄大于某一参数的学生

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    students:[
      {id:1,name:'xiaoming',age:18},
      {id:2,name:'dahei',age:21},
      {id:3,name:'qiaodan',age:40},
    ]

  },
  getters:{
    studentMoreAge(state){
      // return function(paramAge){
      //   return state.students.filter(s=>s.age>paramAge)
      // }
      return paramAge => state.students.filter(s=>s.age>paramAge)
    }
  }

})
export default store

<div>{{ $store.getters.studentMoreAge(21) }}</div>

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

getters

export default {
  powerCount(state) {
    return state.counter * state.counter
  },
  addHello(state) {
    return state.counter + 'hello'
  }
}

store

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    counter: 10
  },
  getters

})
export default store

App.vue

<template>
  <div id="app">
    <h2>{{ $store.state.counter }}</h2>
    <div>{{power}}</div>
    <div>{{add}}</div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
  computed: {
    // ...mapGetters(['powerCount', 'addHello'])
    ...mapGetters({
      power: 'powerCount',
      add: 'addHello'
    })
  }
}
</script>

mapGetters 有两种写法 ，一种是数组，另一种是对象，对象的方式可以重新命名计算属性的名称