vuex之getters使用和传参

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

.js文件：

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

**定义getters**

getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

使用getters

.vue文件中

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

**辅助函数** - mapGetters

.js文件

computed: {
    ...mapGetters(['filterList'])
}

.vue文件

 <div>{{ filterList }}</div>

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

但是这里我们并不希望id是写死的，而是应该通过我们传递的值，那我们只要在getter返回的值套上一层函数那我们就可以实现传参数
.js文件代码：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
Vue.config.productionTip = false
Vue.use(Vuex)//相当于调用了install

const store=new Vuex.Store({
  // 实例化Vuex的构造参数 state mutatuons action
  state:{
    // 存储状态
    count:0,
    age:18,
    money:10000,
    list:[1,2,3,4,5,6,7,8,9],
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters:{
    felter(state){
      return state.list.filter(i=>i>5)
    },
    //传参  参数id 用函数接受
    getTodoById(state){
      console.log("进来了")
      return (id)=>state.todos.find(item=>item.id === id)
    }
  },
  mutations:{

  },
  actions:{

  }
})//实例化一个Vuex  

new Vue({
  render: h => h(App),
  store//es6写法   store:store
}).$mount('#app')

.vue代码：

<template>
  <div id="app">
  <div>{{$store.state.count}}</div>
  <div>{{count}}</div> 
  <div>{{$store.getters.felter}}</div>
  <div>{{felter}}</div>
  <div>getTodoById:{{$store.getters.getTodoById(2)}}</div>
  </div>
</template>

<script>
import {mapGetters, mapState} from 'vuex'

export default {
  name: 'App',
  computed:{
    // count(){
    //   return this.$store.count
    // }
    ...mapGetters(['felter']),
    ...mapState(['count','age','money'])
  }
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>