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中top/parent/frame概述及案例应用
Feb 06 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
Vuex新手的理解与使用详解
May 31 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
ajax实现无刷新分页(php)
2010/07/18 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php判断当前操作系统类型
2015/10/28 PHP
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python 实时遍历日志文件
2016/04/12 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python装饰器用法示例小结
2018/02/11 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
如何使用python进行pdf文件分割
2019/11/11 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
诚信考试承诺书
2014/03/27 职场文书
库房保管员岗位职责
2014/04/07 职场文书
工程售后服务承诺书
2014/05/21 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
个人投资合作协议书
2014/10/12 职场文书
创先争优承诺书
2015/01/20 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
雷锋的观后感
2015/06/10 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS