vuex简单梳理2.getters和辅助函数

getters是做什么用的呢,就可以理解为是vuex中的计算属性

const getters = {
    sumVote(state){//第一个参数访问state
        return state.liuDeHua + state.zhangXueYou;
    },
    sexAge(state,getters){//第二个参数访问getters里的其他方法
        return state.sex + getters.sumVote
    },
    findArr : (state) => (num) => {//还可以return一个函数,这个函数可以传参
        let include = state.arr.find((n) => n === num)
        if (typeof (include) === 'undefined') {
            return false
        } else {
            return true
        }
    }
}

在组件中使用时同样从$store中获取

{{$store.getters.sumVote}}

getters的辅助的函数 mapGetters 同样是为了更简便的使用gettters,挂在组件的computed下

 computed:{
            ...mapGetters(["sumVote","sexAge","findArr"]),
            ...{
                add(){//组件私有的计算属性
                    return this.one + this.two
                }
            }
        }

使用时直接调用

{{sumVote}}<br/>
{{sexAge}}<br/>
{{findArr(9)}}<br/>

也可以自定义getters里面函数的名称

computed:  mapGetters({
      'sum': 'sumVote',
      'age': 'sexAge',
      'find': 'findArr'
  })

 

posted @ 2020-08-26 16:19  忽闻河东狮子吼  阅读(361)  评论(0编辑  收藏  举报