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 相关文章推荐
尝试在让script的type属性等于text/html
Jan 15 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jqTransform美化表单
Oct 10 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
微信小程序 滚动到某个位置添加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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python实现线程状态监测简单示例
2018/03/28 Python
使用python存储网页上的图片实例
2018/05/22 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python中的枚举类型示例介绍
2019/01/09 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
四好少年事迹材料
2014/01/12 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
教师求职信范文
2014/05/24 职场文书
销售开票员岗位职责
2015/04/15 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL