state ， getters 的用法

  <!-- 
    getters中都是函数
      可以从state或者getter中衍生新的数据

      因为getter是对state衍生出来的数据，所以每个getter函数都有参数state

      getter是可以返回一个函数的，这样我们就可以在组件中传参数来筛选获取到我们想要的数据
    {
      getters:{
        //正常写的getter
        getter名字(state,getters) {
          return state.xxx数据
        },
        //使用时 $store.getters.getter名字
        //返回函数时
        getter名字 (state,getters) {
          return (参数) => {
            return state.xxx根据参数筛选数据
          }
        }
        //使用时 $store.getters.getter名字(实参)
      }
    }
   -->

     <div id="app">
     <!-- {{$store.getters.boys}} -->
     <ul>
       <li v-for="boy in $store.getters.boys">
         <span>{{boy.name}}</span>
         <span>{{boy.sex}}</span>
       </li>
     </ul>
     <ul>
       <li v-for="stu in students(15)">
         <p><span>姓名：{{stu.name}}</span></p>
         <p><span>年龄：{{stu.age}}</span></p>
       </li>
       <p><span>男孩数：{{$store.getters.boysLength}}</span></p>
     </ul>
   </div>
  <script src="./js/vue.js"></script>
  <script src="./js/vuex.js"></script>
  <script>
    const store = new Vuex.Store({
      state: {
        stus: [
          {name: '张静',age: 16,sex: '女'},
          {name: '李四',age: 28,sex: '男'},
          {name: '旺旺',age: 10,sex: '女'},
          {name: '小花',age: 18,sex: '女'},
          {name: '高尚',age: 15,sex: '男'},
          {name: '潘潘',age: 16,sex: '女'},
          {name: '张三',age: 17,sex: '男'},
        ]
      },
      getters: { //getter都是函数
        boys (state) {
          //return 的值就是未来获取到的值
          return state.stus.filter(stu => stu.sex === '男')
        },
        ageOld (state) {
          // return state.stus.filter(stu => stu.age >=18)
          //getter 中可以返回一个函数
          return (age) => {
            return state.stus.filter(stu => stu.age >=age)
          }
        },
        boysLength (state,getters) {
          return getters.boys.length
        }
      }
    })

    const app = new Vue({
      el: '#app',
      store,
      computed: {
        students () {
          return this.$store.getters.ageOld
        }
      }
    })
  </script>