专栏首页前端之攻略vue 计算属性与vuex getters的传参

vue 计算属性与vuex getters的传参

计算属性比method好的一点是计算属性依赖数据是否变化而执行,不是每一次都执行,效率比较高,为了复用代码可以给计算属性进行传参

使用计算属性返回一个函数来实现

<el-button v-if="getpermBTN('add')">test</el-button>
    computed:{
      getpermBTN(){
        return btn=>{
          console.log("hi")
           return this.$store.getters.getBtnsLength(btn)
        }        
      }
    },
  state: {
    perbtns:["update","add","delete"],
  },
  getters:{
    getBtnsLength:state=> btn=>{     
      console.log("getter")
      return state.perbtns.indexOf(btn)>-1
    }
  },

以上代码是实现按钮权限,假如当前用户有几个按钮权限,在页面中那些按钮可以显示,用计算属性来实现,但是发现一个问题,在页面上输入文本框或点击任何按钮,vuex 里面的getter里面的代码都会执行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element NavMenu 左侧菜单展开折叠Echart图表自适应父级Div

    在NavMenu菜单切换展开折叠的时候,Div 是自适应的,但是如果页面含有Echart图表,需要特殊处理才能只适应父级Div的大小

    tianyawhl
  • 隐藏数值为0的情况下的div 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • ionic2-loading动画 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 最全的用户数据指标解读

    现代管理学之父 彼得·德鲁克 提出用管理促进企业增长,他讲过一句非常经典的话:如果你不能衡量,那么你就不能有效增长。

    猴子聊数据分析
  • 最全的用户数据指标解读

    现代管理学之父 彼得·德鲁克 提出用管理促进企业增长,他讲过一句非常经典的话:如果你不能衡量,那么你就不能有效增长。

    猴子聊数据分析
  • Linux curl 表单登录或提交与cookie使用

    本文主要讲解通过curl 实现表单提交登录。单独的表单提交与表单登录都差不多,因此就不单独说了。

    踏歌行
  • 二进制学习系列-格式化字符串got

    加上运行过后整体了解到有一块检测登陆用户和三个模块函数,一个是编写文件'put',一个是显示文件'dir',还有一个是读取文件'get'。

    安恒网络空间安全讲武堂
  • 精读《React Hooks》

    React Hooks 是 React 16.7.0-alpha 版本推出的新特性,想尝试的同学安装此版本即可。

    ConardLi
  • Linux curl表单登录或提交与cookie使用详解

    本文主要讲解通过curl 实现表单提交登录。单独的表单提交与表单登录都差不多,因此就不单独说了。

    砸漏
  • 国内外提供免费的域名DNS解析的服务商

    是不是该来的时候了!CloudXNS将很快停止免费用户的域名解析!还是世界上没有“永久”的免费服务?! 哪个适合我们的域名?让我们给你推荐一些。 博客作者计划将...

    Erwin

扫码关注云+社区

领取腾讯云代金券