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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
JavaScript 中的replace方法说明
Apr 13 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP多进程编程实例详解
2017/07/19 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
用原生js做单页应用
2017/01/17 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
django框架自定义用户表操作示例
2018/08/07 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python如何根据时间序列数据作图
2020/05/12 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
小学捐书活动总结
2014/07/05 职场文书
刑事和解协议书范本
2014/11/19 职场文书
商务信函英语问候语
2015/11/10 职场文书
个人业务学习心得体会
2016/01/25 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python