mapState,...mapState对象展开符简述

        当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了。我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性。

        mapState 的作用就是帮我们把一个对象数组里的值转化成计算属性的写法。将传入的数组或对象转成 computed 计算属性能够识别的代码。

例子1:mapState的一种使用方式及它的实际代码效果

例子2:mapState的几种用法

computed: mapState({

        count: 'count', // 第一种写法

        sex: (state) => state.sex, // 第二种写法

        from: function (state) { //第三种写法,用普通函数this指向vue实例,要注意

              return this.str + ':' + state.from

        },

  }),

额外知识点补充:事实上第二种和第三种是同一种,只是前者用了ES6的偷懒语法,箭头函数,在偷懒的时候要注意一个问题,this指针的指向问题,不要在vue中为了偷懒使用箭头函数,会导致很多很难察觉的错误,如果你在用到state的同时还需要借助当前vue实例的this,请务必使用常规写法.

mapState 还经常使用到 es6 的扩展运算符,这个不是 vuex 的实现,而是 es6 的一个新特性:

转自:

https://blog.csdn.net/dkr380205984/article/details/82185740

https://juejin.im/post/5ae433ab518825671a6388d5

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值