Vuex简单入门


Posted in Javascript onApril 19, 2017

1.Vuex是什么?

学院派:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;集中存储和管理应用的所有组件状态。

理解:以上这4个词是我们理解的关键。状态:什么是状态,我们可以通俗的理解为数据。Vue只关心视图层,那么视图的状态如何来确定?我们知道是通过数据驱动,这里的状态管理可以简单理解为管理数据。集中存储:Vue只关心视图,那么我们需要一个仓库(Store)来存储数据,而且是所有的数据集中存储,视图和数据就可以分析。管理:除了存储,还可以管理数据,也就是计算、处理数据。所有组件状态:所用的组件共用一个仓库(Store),也就是一个项目只有一个数据源(区分模块modules)。

总结:Vuex就是在一个项目中,提供唯一的管理数据源的仓库。

2.有什么用?使用场景?

场景一:处理多组件依赖于同一个数据,例如有柱状图和条形图两个组件都是展示的同一数据;

场景二: 一个组件的行为——改变数据——影响另一个组件的视图,其实也就是公用依赖的数据;

Vuex将组件公用数据抽离,在一个公共仓库管理,使得各个组件容易获取(getter)数据,也容易设置数据(setter)。

3.源码初览

这是Vuex的源码文件,总共包含五大部分,Plugins两个注入文件,核心文件index,帮组文档helper,工具文件util.js

Vuex简单入门

我们先看看Index.js文件export的框架,后面具体分析。

export default {
     Store,  
     install,
     mapState,
     mapMutations,
     mapGetters,
     mapActions
           }

后面文章分析Store仓库。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
Javascript玩转继承(三)
May 08 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
vue实现弹幕功能
Oct 25 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 #Javascript
微信小程序 slider的简单实例
Apr 19 #Javascript
详解Node.js中exports和module.exports的区别
Apr 19 #Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 #Javascript
微信小程序 登录的简单实现
Apr 19 #Javascript
微信小程序开发入门基础教程
Apr 19 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php数组去重的函数代码
2013/02/03 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python基于百度云文字识别API
2018/12/13 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
简述python Scrapy框架
2020/08/17 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
班级聚会策划书
2014/01/16 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
表彰会主持词
2014/03/26 职场文书
工作求职自荐信
2014/06/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
雨花台导游词
2015/02/06 职场文书
高三生物教学反思
2016/02/22 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB