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获取图片大小的函数代码
Sep 20 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
python利用正则表达式提取字符串
2016/12/08 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python 私有化操作实例分析
2019/11/21 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
部队万能检讨书
2014/02/20 职场文书
网络技术专业求职信
2014/07/13 职场文书
语文教师个人工作总结
2015/02/06 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
行政复议答复书
2015/07/01 职场文书
商务宴会祝酒词
2015/08/11 职场文书
感恩教育主题班会
2015/08/12 职场文书
初中体育课教学反思
2016/02/16 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
浅谈JavaScript作用域
2021/12/06 Javascript
Go web入门Go pongo2模板引擎
2022/05/20 Golang
css样式important规则的正确使用方式
2022/06/10 HTML / CSS