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 相关文章推荐
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
微信小程序合法域名配置方法
May 06 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
node后端服务保活的实现
Nov 10 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
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Django进阶之CSRF的解决
2018/08/01 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
正科级干部考察材料
2014/05/29 职场文书
责任书范本
2014/08/25 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL