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

本文详细介绍了在Vue应用中如何利用Vuex的mapState辅助函数简化组件状态获取,通过三种不同写法展示其灵活性,并强调了正确使用this指针的重要性,避免潜在错误。

        当一个组件要获取多个 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.youkuaiyun.com/dkr380205984/article/details/82185740

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

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值