getters

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

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

 
{{$store.getters.powerCounter}}

获取超过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

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

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

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

 
{{ $store.getters.studentMore20Length }}

当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

{{ $store.getters.studentMoreAge(21) }}

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

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