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的几种方法小结
Apr 25 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
javascript动画算法实例分析
Jul 31 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 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
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
详解Python中的路径问题
2020/09/02 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
优纳科技软件测试面试题
2012/05/15 面试题
英文求职信结束语大全
2013/10/26 职场文书
2014年情人节活动方案
2014/02/16 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python