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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php db类库进行数据库操作
2009/03/19 PHP
php读取csc文件并输出
2015/05/21 PHP
nodejs npm package.json中文文档
2014/09/04 NodeJs
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
js实现拖拽上传图片功能
2017/08/01 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
PyQt5实现拖放功能
2018/04/25 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
给客户的道歉信
2014/01/13 职场文书
保护母亲河倡议书
2014/04/14 职场文书
学用政策心得体会
2014/09/10 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
教师党员自我评价2015
2015/03/04 职场文书
公司年夜饭通知
2015/04/25 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js