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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
微信小程序 聊天室简单实现
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
php与java通过socket通信的实现代码
2013/10/21 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
HTML5有哪些新特征
2015/12/01 HTML / CSS
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
一年级小学生评语大全
2014/12/25 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python