Vuex - Getter

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

- getters: 计算属性,

getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，getter就可以对state进行计算操作，它就是store的计算属性。对state 中的数据进行处理都尽量写在getter中，保持页面的整洁，可读性比较高。那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。getter可以在多组件之间复用如果一个状态只在一个组件内使用，可以不用getters

这里我们引用上一篇Vuex - State来展开讲解，在state中我们定义了购物车列表数组，存了一些列表数据。在state中存的数据就是为了下一步的铺垫，只有state中在这里定义了，在getter中才能获取对你定义的这个数组做出相应的计算。

注意从 Vue 3.0 开始，getter 的结果不再像计算属性一样会被缓存起来。这是一个已知的问题，将会在 3.2 版本中修复。详情请看 PR #1878。

export default {
     // 存储数据
     state: {
        
    },
    //计算属性 
        getters: {
            activeList:(state)=>{
                return state.list.filter(v=>{
                    return v.status
                })
            },
            noActiveList:(state)=>{
                return state.list.filter(v=>{
                    return !v.status
                })
            },
            getList(state,getters){
                return getters.activeList.filter(v=>{
                    return v.num > 5
                })
            },
            getById:(state)=>(id)=>{
                return v.id === id
            }

        },
}

Getter用于对Store中的数据进行加工处理形成新的数据 它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化。

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

然后打开Addition中，添加插值表达式使用getters，或者也可以在Addition中，导入mapGetters，并将之映射为计算属性

	import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}