Django

Vuex state,mapState,...mapState

2019-12-29  本文已影响0人  凤箫之舞

1.state
state是什么?

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

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

虽然state和data有很多相似之处,
但state在使用的时候一般被挂载到子组件的computed计算属性上,
这样有利于state的值发生改变的时候及时响应给子组件.

如果你用data去接收store.state,当然可以接收到值, 但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到, 当然你也可以通过watchstore去解决这个问题,那你可以针是一个杠精

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

2.mapState 辅助函数
mapState是什么?

表面意思:mapState是state的辅助函数.这么说可能很难理解

抽象形容:mapState是state的语法糖,这么说可能你还想骂我,因为你根本不了解什么叫做语法糖,事实上我说的语法糖有自己的定义,什么是语法糖?

我对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟练了,
并且这种操作也不存在什么问题,为什么要用所谓的"更好的操作",用了一段时间后,真香!

实际作用:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键

在使用mapState之前,要导入这个辅助函数.

import { mapState } from 'vuex'

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

上一篇下一篇

猜你喜欢

热点阅读