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 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
javascript之Partial Application学习
Jan 10 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
Openlayers实现地图全屏显示
Sep 28 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生成二维码的两个方法和实例
2014/07/01 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
解决python写的windows服务不能启动的问题
2014/04/15 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
eclipse创建python项目步骤详解
2019/05/10 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python实现的Iou与Giou代码
2020/01/18 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
详解KMP算法以及python如何实现
2020/09/18 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
专家推荐信范文
2015/03/26 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
九年级数学教学反思
2016/02/17 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python