4.5 getters
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
computed: {
arr() {
return this.$store.state.todos.filter(todo => todo.done).length
}
}在Vuex中，getter类似于组件中的computed，表示state的一些计算后的值。
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像computed计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：
main.js
import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
import createLogger from 'vuex/dist/logger'; //调试工具Vue.use(Vuex); //将Vuex安装到全局
//创建一个仓库，并且存放以一些全局数据（存放四大选项）
const store = new Vuex.Store({
state:{
a:100,
students:[
{name:"小明",sex:"男"},
{name:"小红",sex:"女"},
{name:"小刚",sex:"男"},
{name:"小花",sex:"女"},
{name:"小黑",sex:"男"}
] },
getters:{
//得到所有男生
nan(state){
return state.students.filter((item)=>{
return item.sex == '男';
})
},
//得到所有女生
nv(state){
return state.students.filter((item)=>{
return item.sex == '女';
})
},
//得到男生和女生的个数，getter也可以接受getter作为第二个参数
nanCount(state,getters){
return getters.nan.length;
},
nvCount(state,getters){
return getters.nv.length;
}
},
plugins: [createLogger()]})
new Vue({
el:"#app",
store, //将store注入到全局
render:(h)=> h(App)
})
App.vue父组件：
<template>
<div>
<h1>{{students}}</h1>
<h2>男生：{{$store.getters.nanCount}}个</h2>
<h2>女生：{{$store.getters.nvCount}}个</h2>
<button @click="nan">查看男生</button>
<button @click="nv">查看女生</button>
<button @click="all">查看全部</button>
</div>
</template>
<script>
export default {
data(){
return {
isState:'all'
}
},
computed:{
students(){
if(this.isState == 'all'){
return this.$store.state.students;
}else if(this.isState == 'nan'){
return this.$store.getters.nan;
}else if(this.isState == 'nv'){
