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 动态加载 css 方法总结
Jul 11 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
Node.js+ELK日志规范的实现
May 23 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Vue动态加载异步组件的方法
2018/11/21 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
解决DataFrame排序sort的问题
2018/06/07 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python使用xpath实现图片爬取
2020/09/16 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
试述DBMS的主要功能
2016/11/13 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
文言文形式的学生求职信
2013/12/03 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
社区工作感言
2014/02/21 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python