Vuex之理解state的用法实例


Posted in Javascript onApril 19, 2017

1.什么是state?

上一篇文章说了,Vuex就是提供一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actionsmutations对应于methods)。

响应书存储:state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新。(这里“状态”=“数据”),也就是是说数据和视图是同步的。

2.局部状态

获取:在Vue组件中获取数据,最直接的可以通过计算属性中获取;

组件仍然可以保存局部状态:虽然说VuexStore仓库让我们同一管理数据变得更加方便,但是代码一多也会变得冗长,有些组件的数据是自己严格自用,我们可以将state放在组件自身,作为局部数据,专供此组件使用,其他的组件不能用。

3.mapState

mapState的作用是把全局的 state getters 映射到当前组件的 computed 计算属性中,this.$store.state

使用示例

import {mapState} from 'vuex' 
 export default {
 computer :
 mapState({
  count: state => state.count,
  'count' // 映射 this.count 为 store.state.count
 })
}

看看源码

export function mapState (states) {
  const res = {}  //定义一个对象
  normalizeMap(states).forEach(({ key, val }) => {
  // normalizeMap()函数初始化states数据
     res[key] = function mappedState () {
      return typeof val === 'function'
      // 判断val是否是函数
      ? val.call(this, this.$store.state, this.$store.getters)
      // 若val是函数,将store的state和getters作为参数,返回值作为mapped State的返回值
      : this.$store.state[val]}})
    return res // 返回的是一个函数
  }
//初始化方法 
 function normalizeMap (map) {
    return Array.isArray(map) //判断state是否是数组
    ? map.map(key => ({ key, val: key }))
    // 是数组的话,调用map方法,将每一个数组元素转换成{key,val:key}
    : Object.keys(map).map(key => ({ key, val: map[key] }))
    // 否则就是对象,遍历对象,将每一个val变成val:key
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
vue.js中created方法作用
Mar 30 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
微信小程序 聊天室简单实现
Apr 19 #Javascript
Vuex之理解Store的用法
Apr 19 #Javascript
微信小程序 判断手机号的实现代码
Apr 19 #Javascript
Vuex简单入门
Apr 19 #Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 #Javascript
微信小程序 slider的简单实例
Apr 19 #Javascript
详解Node.js中exports和module.exports的区别
Apr 19 #Javascript
You might like
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
基于AngularJS实现表单验证功能
2017/07/28 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python如何制作缩略图
2019/04/30 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
幼儿园元旦亲子活动方案
2014/02/17 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
办理护照工作证明
2014/10/10 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
广告业务员岗位职责
2015/02/13 职场文书
爱国之歌(8首)
2019/09/29 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python