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 按回车键相应按钮提交事件
Nov 02 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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中使用imagick实现把PDF转成图片
2015/01/26 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Django之路由层的实现
2019/09/09 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
麦当劳辞职信范文
2014/01/18 职场文书
电工技术比武方案
2014/05/11 职场文书
组织鉴定材料
2014/06/02 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
初三英语教学反思
2016/02/15 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs