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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
心扬JS分页函数代码
Sep 10 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
语义化 H1 标签
2008/01/14 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
超级退弹代码
2008/07/07 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
浅谈$('div a') 与$('div>a')的区别
2016/07/18 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
django 自定义过滤器的实现
2019/02/26 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python descriptor(描述符)的实现
2020/11/15 Python
python lambda的使用详解
2021/02/26 Python
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
民族团结先进个人事迹材料
2014/06/02 职场文书
师德承诺书
2015/01/20 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python