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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
javascript常见用法总结
May 22 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
vue 动态修改a标签的样式的方法
Jan 18 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
详解vue中axios的封装
Jul 18 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
es6函数之严格模式用法实例分析
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
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
python实现K最近邻算法
2018/01/29 Python
遗传算法python版
2018/03/19 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python 字典的打印实现
2019/09/26 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
运动会入场口号
2014/06/07 职场文书
销售岗位职责范本
2014/06/12 职场文书
责任书格式范文
2014/07/28 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
生活委员竞选稿
2015/11/21 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书