1.當(dāng)需要從store中獲取一些state變異后的狀態(tài)時(shí)诚卸，可以使用getters，如獲取state中的counter的平方值

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

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

獲取超過(guò)20歲的學(xué)生：
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可以作為參數(shù)笑陈，供其它getters使用

獲取上面代碼中年齡大于20歲的長(zhǎng)度

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

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

當(dāng)getters需要傳遞參數(shù)時(shí)役纹，可以通過(guò)返回一個(gè)函數(shù)來(lái)接收參數(shù)

獲取年齡大于某一參數(shù)的學(xué)生

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 輔助函數(shù)

mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性：

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 有兩種寫(xiě)法 蟀瞧，一種是數(shù)組，另一種是對(duì)象届氢，對(duì)象的方式可以重新命名計(jì)算屬性的名稱(chēng)