state单一状态树的理解/getters理解使用

state单一状态树的理解

将所有需要管理的信息放到一个store里管理

getters使用详解

可以理解为计算属性。假如我们state里保存的还有其他复杂状态

//共享状态
state: {
  counter: 100,
  student:[
    {id:110,name:'why',age:18},
    {id:112,name:'why2',age:28},
    {id:113,name:'why3',age:38},
    {id:114,name:'why4',age:48}
  ]
},

我们要筛选出年龄小于35的学生，按照以前知识可以有的做法：

使用v-for与v-if

<ul v-for="item in $store.state.student">
  <li v-if="item.age<=35">{{item}}</li>
</ul>

先使用v-for遍历数组，获取每一个sudent对象保存到item中，再进行v-if筛选student.age属性，满足则显示

使用计算属性

computed: {
  moreStudent() {
    return this.$store.state.student.filter(s => {
      return s.age <= 35;
    })
  }
},

计算属性里使用了高阶函数进行筛选。传入一个回调函数，有一个参数s，student这个数组调用的filter函数，会依次遍历这个数组，将每个对象存入s中，每个s都会执行这个回调函数，返会true则会被保存到一个新的数组，如果false忽略该对象。

要使用本地的元素一定不要漏掉this，和直接在html结构里使用是不同的，这两个方法上边就可以不用this，下边就需要。

使用getters

问题是别的地方也需要相同的筛选要求，那就需要将代码拷贝到别处。

vue不是将1就组件开发，抽离思想，这里我们同样要抽离

moreStudent(state) {
  return state.student.filter(s => s.age <= 35)
}

这里箭头函数内部只有一行，且有返回值，可以省略{}和return

这样在其他页面需要赛选状态时，就可以直接调用

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

getters作为参数和传递参数

比如我们还需要获取到被筛选的人数，当然我们直接使用length也可以，但是我们这里可以将getters作为参数

getters: {
  powerCounter(state) {
    return state.counter * state.counter
  },
  moreStudent(state) {
    return state.student.filter(s => s.age <= 35)
  },
  moreStudentLength(state,getters) {
    return getters.moreStudent.length
  }
},

getters里的方法本身自带有一个state的默认参数，就是state对象，其本身也可以作为参数，我们使用getters参数时获取的就是getters对象本身，可以调用里边所有的方法，包括正在使用getters的方法。有点递归的感觉

如果我们想自定义筛选年龄呢？

moreAgeStudent(state){
  return function (age) {
    return state.student.filter(s => s.age <= age)
  }
}

我们可以在方法内部再返回一个方法，可以接受一个参数作为筛选指标

<h2>{{$store.getters.moreAgeStudent(27)}}</h2>

我们调用时传入的27不是赋值给state，而是age.