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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
python中reader的next用法
2018/07/24 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
适用于所有创业者的创业计划书
2014/02/05 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
优秀员工自荐书
2015/03/06 职场文书
财务部岗位职责范本
2015/04/14 职场文书
2015年售票员工作总结
2015/04/29 职场文书