63. VUEX Getters基本使用

getters 是用来存放state更换后的状态的，是用来定义函数的，目前我知道的 : 每个函数都有两个参数，第一个是state，第二个是本身getters 【多一个都不行的  ！】。

案例：我state中有一个num是9，有几个组件想取num的平方，如果直接修改是不可观的，因为有些取有想对它做其他操作，，，那么就用getters即可：

有些这样写 虽然可以 但是..　　

所以你只需要在getters中定义函数 然后返回 num 的平方根即可：

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

Vue.use(Vuex)   


const myVuex = new Vuex.Store({
    state:{num:9},             

    mutations:{                     
       
    },              
    
    getters:{
       numSquare(state){                //第二个参数是 本身getters ，用时在写即可
       return state.num * state.num;
    } 
    },
    actions:{},
    modules:{},
});


export default myVuex   //导出VUX对象

　　　　然后你在 模板直接用即可 。

例2： 有几个人的资料存在state中，我现在需要可以用 getters筛选条件 而且 可以打印筛选后的长度

详细看代码  我封装的非常好了：  

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

Vue.use(Vuex)   


const myVuex = new Vuex.Store({
    state:{
        user:
        [
            {name:"肖丽雅",age:18,hobby:'Basketball',birthday:'1996-5-16'},
            {name:"张飞",age:33,hobby:'Football',birthday:'1999-6-12'},
            {name:"刘备",age:62,hobby:'badminton',birthday:'2002-5-20'},
            {name:"李晓雨",age:19,hobby:'Volleyball',birthday:'1995-5-16'},
            {name:"张艳艳",age:36,hobby:'run',birthday:'1876-5-16'},
        ]
    },             

    mutations:{                     
       
    },              
    
    getters:{
        Less(state){            //这个算法务必看懂 其实就是 传参数age进来。
            return age =>{         //返回一个函数 参数是age
                return state.user.filter(s => s.age < age)         //返回小于20岁的人
            }
        }
    },
    actions:{},
    modules:{},
});


export default myVuex   //导出VUX对象

<template>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>爱好</th>
          <th>生日</th>
        </tr>
      </thead>
      <tbody>
          <tr v-for="(item) in $store.state.user">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.hobby}}</td>
            <td>{{item.birthday}}</td>
          </tr>

      </tbody>
    </table>
    
    <h1>年龄大于20岁的有：</h1>
    <table>
      <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
        <th>生日</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item) in $store.getters.Less(20)">      <!--主要逻辑 返回小于20岁的-->
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.hobby}}</td>
          <td>{{item.birthday}}</td>
      </tr>
      </tbody>
    </table>

    <h2>个数： {{$store.getters.Less(20).length}}</h2>      <!--主要逻辑 返回小于20岁的个数-->
  </div>
</template>
  

<script>
export default {

};
</script>


<style scoped>
  table{
    border: 1px black solid;
    border-collapse: collapse;
    border-spacing: 0;
}

th,td{
padding: 8px 16px;
border: 1px solid black;
    text-align: left;
}

th{
    background-color: #f7f7f7;
    color: black;
    font-weight: 600;
}
</style>

运行：