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 相关文章推荐
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 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清除bom示例
2014/03/03 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python——全排列数的生成方式
2020/02/26 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
最新销售员个人自荐信
2013/09/21 职场文书
个人承诺书格式
2014/06/03 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
golang 实现并发求和
2021/05/08 Golang
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android