博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vuex的state,mapState,...mapState对象展开符详解
阅读量:5876 次
发布时间:2019-06-19

本文共 2338 字,大约阅读时间需要 7 分钟。

1.state

  state是什么?

  定义:state(vuex) ≈ data (vue)

  vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.

  虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到,当然你也可以通过watch $store去解决这个问题,那你可真是一个杠精

  综上所述,请用computed去接收state,如下

//store.jslet state = {  count: 1,  name: 'dkr',  sex: '男',  from: 'china'}export default state

2.mapState 辅助函数

mapState是什么?
表面意思:mapState是state的辅助函数
实际作用:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键
在使用mapState之前,要导入这个辅助函数.
import { mapState } from 'vuex'
然后就是使用方式了

在使用的时候,computed接收mapState函数的返回值,你可以用三种方式去接收store中的值,具体可以看注释.

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

  当然computed不会因为引入mapState辅助函数而失去原有的功能---用于扩展当前vue的data,只是写法会有一些奇怪,如果你已经写了一大堆的computed计算属性,做了一半发现你要引入vuex,还想使用mapState辅助函数的方便,你可以需要做下列事情.

//之前的computedcomputed:{    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ........}//引入mapState辅助函数之后computed:mapState({    //先复制粘贴    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ......    //再维护vuex    count:'count'    .......})

从上述写法可以看出来,这不符合代码的某些说不明道不清的特性,我们希望我们可以不用去做一些复制粘贴的无用操作,而是直接使用mapState,希望它能自动融入到当前生产环境中,ok,ES6+(或者说ES7)提供了这个方便.

3 ...mapState
  事实上...mapState并不是mapState的扩展,而是...对象展开符的扩展.当然如果你把他用在这里会发现他能使得代码看起来变得,更加符合常规逻辑了,为什么这么说,你等下就会知道了.

  首先,来回顾一下...对象展开符在数组中的表现,这在ES6语法学习分类里有相关说明,如果有兴趣可以关注我的ES6分类中的文章.

let arr = [1,2,3]console.log(...arr) //1,2,3

这里的json可以成功将mapState return的json格式,和json自带的a属性成功融合成一个新的对象.你可以将这个称为对象混合

这样,你就可以自由的使用mapState了.

//之前的computedcomputed:{    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ........}//引入mapState辅助函数之后computed:{    //原来的继续保留    fn1(){ return ...},    fn2(){ return ...},    fn3(){ return ...}    ......    //再维护vuex    ...mapState({  //这里的...不是省略号了,是对象扩展符        count:'count'    })}

转载于:https://blog.51cto.com/9161018/2322492

你可能感兴趣的文章
jquery.cookie.js插件删除不掉cookie的问题
查看>>
Oracle 数据库的逻辑迁移
查看>>
【SDOI2009】Bill的挑战
查看>>
spring-boot打包,引入外部jar包问题
查看>>
MySQL连接数超过限制的解决方法
查看>>
Log4j和Slf4j的比较
查看>>
程序员是自己的“上帝”
查看>>
git 忽略权限记录一下
查看>>
php 自动绑定di容器实现
查看>>
windows 服务开发和windows install开发
查看>>
Session的作用和使用场景
查看>>
iOS开发UIMotionEffect运动视觉效果
查看>>
关于sql 资源竞争死锁现象
查看>>
crontab定时任务
查看>>
go的常量与变量
查看>>
第04次作业-树
查看>>
团队-象棋游戏-开发文档
查看>>
Unity 3D委托entrust
查看>>
webSocket vnc rfb
查看>>
列表推导式 生成器表达式
查看>>