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 相关文章推荐
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
javascript实现数独解法
Mar 14 Javascript
详谈javascript异步编程
Feb 21 Javascript
javascript冒泡排序小结
Apr 10 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python多进程操作实例
2014/11/21 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python requests 使用快速入门
2017/08/31 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
简单了解django文件下载方式
2020/02/10 Python
AUC计算方法与Python实现代码
2020/02/28 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python drf各类组件的用法和作用
2021/01/12 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
入党现实表现材料
2014/12/23 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android