zoukankan      html  css  js  c++  java
  • 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'
      })
  • 相关阅读:
    要养成记录技术问题的习惯
    js排序方法
    阶乘算法练习
    简易的自定义滚动条加鼠标滑轮事件结合使用
    等虚线框的拖拽
    照片墙效果
    苹果导航菜单效果
    简易封装js库
    JQ 实现切换效果
    三级菜单
  • 原文地址:https://www.cnblogs.com/ybhome/p/13565858.html
Copyright © 2011-2022 走看看