Vuex state,mapState,...mapState说明

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

2.mapState 辅助函数

  mapState是什么?

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

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

我对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟练了,

并且这种操作也不存在什么问题,为什么要用所谓的"更好的操作",用了一段时间后,真香!

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

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

import { mapState } from 'vuex'

3 ...mapState

事实上...mapState并不是mapState的扩展,而是...对象展开符的扩展.

当然如果你把他用在这里会发现他能使得代码看起来变得,更加符合常规逻辑了,