vuex的使用
vue现在越来越火,不单单可以写简单的小项目,也可以写大中型的项目。但是项目大了,项目之间的数据传递就会变得复杂,那么问题来了?在一个大型项目中,多个组件要公用同一个或多个数据,我们如何保证每个组件获取到的数据都是预期对的值呢?这就要用到vuex了。
学习一样新的东西,我的学习思路一般有三步:
1、它是什么?
2、它是做什么的?
3、它有什么用处?
下面,我们就按照以上三点,来学习一下vuex。
一、vuex是什么
vuex是一个专门为vue.js设计的集中式状态管理架构。如果不明白这句话,我们做一个比喻,首先我们设置一个情景:有一个村子,村子里有5户普通人家和一户村长家,村长负责管理村子里所有的粮食,每次有人家要吃饭,这家人都要先告诉村长,我们这次需要吃多少斤,然后村长称出等量的粮食交给要吃饭的这家人。这样,村长随时都知道村里粮食有多少,但是,如果突然又搬来了几十户人家,每家每次吃饭都要这样村长会很麻烦,所以呢,村长就想出一个办法,在村子里建一个仓库,把村子里所有的粮食都放进仓库里,有哪家人要吃饭了,就自己到仓库里去取,这样,村长就不用那么累了。在这个例子里,一个村子就是一个vue项目,村长就是项目的一个父组件,5户普通人家就是5个子组件,他们吃的粮食就是组件之间共同的一个数据,那么那个存放粮食的仓库就是我们所说的vuex架构。所谓的状态自然就是公用数据的状态了。简言之就是把多个组件公用的数据放到一个公用的仓库去管理,这样说不知道会不会好理解一些。
二、vuex是做什么的
就像上面的例子所描述的,vuex就是一个专门管理vue项目数据的一个架构,它的工作就是定义并初始化所有公用数据、定义对数据的同步和异步操作。如果有组件要使用这里的数据,直接调用定义好的操作方法即可。
三、vuex有什么用
之前我们说如果项目较大,数据传递复杂的情况下,我们可以使用vuex来同意管理数据状态。它的作用就是将项目的公用数据及对数据的操作封装到一个单独的管理器中,这个管理器只定义对数据有关的操作,不包含其他任何与dom或与数据无关的代码。所以从数据管理的角度来说,vuex使得数据管理更加方便明了,从使用数据的组件角度来说,也更方便快捷,如果想使用数据了,那么我直接引入并调用vuex给定的操作方法,使程序代码可读性更强。
好,大体了解了vuex之后,我们就要看看怎么使用vuex吧!
第一步:安装
npm install vuex --save
第二步:定义路径,填写内容
以上目录是我在一个项目中用到的,
state用于记录state数据的状态
mutations用于定义数据的同步操作
mutation-types用于映射mutation的操作, 存储mtation操作的相关常量(名)
gettesr用于获取state中数据的状态
actions用于定义对mutation的封装或对数据的异步操作
index.js是vuex的入口文件,其他操作文件都要在这里引入,并赋值给store实例
注意:这里在引入vuex后一定要加入这句话:Vue.use('vuex')
第三步:在main.js中引入:import store from './store'
然后挂在到vue实例上:
最后:使用
在组件中用vuex提供的语法糖mapActions,mapGetters,mapMutations等引入store方法并调用
vuex的使用到此就结束了,另外需要注意两点:(一)vuex适用于中大型vue项目,小的项目,数据操作简单的就没必要使用vuex了
(二)一个应用只能有一个store实例,这个store实例要统一管理应用所有公用的数据
好了,今天就写这么多,以上都是我在写项目的时候自己的总结,如果有什么不足之处还请各位大神指正,另外别忘记关注我哦,后续还有更多知识分享,谢谢
vuex的使用的更多相关文章
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- vuex(1.0版本写法)
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- 关于Vue vuex vux 文档
01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex ----->>状态管理模块儿<<------- https://vuex.vue ...
- vuex
英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue2.X的状态管理vuex记录
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method -- ...
- 在vue1.0遇到vuex和v-model的坑
事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...
- vuex 笔记
Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...
随机推荐
- lesson - 7 vim 详解
1. vim简介vim是从vi发展出来 ,第一个版本由布莱姆·米勒在1991年发布 ,它基于VIM许可证,兼容GPL. 官网 www.vim.org 2. 安装vim: yum install -y ...
- SQL语句 我喜欢上海
select * from [user] wherer name like '上海%'
- 快速开发基于 HTML5 网络拓扑图应用1
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...
- python 模块:xlrd && xlwt
主要来自:http://www.jb51.net/article/60510.htm python读excel--xlrd 这个过程有几个比较麻烦的问题,比如读取日期.读合并单元格内容.下面先看看基本 ...
- Micropython实战之TPYBoardv102 DIY金属检测仪
转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 1.实验目的 1.学习在PC机系统中扩展简单I/O接口的方法. 2.进一 ...
- File System 之本地文件系统
上一篇文章提到了,最近做一个基于 File System/IndexedDB的应用,上一篇是定额和使用的查询. 因为LocalFileSystem只有chrome支持,有点尴尬,如果按需加载又何来尴尬 ...
- 在阿里云 ECS 搭建 nginx https nodejs 环境(二、https)
在阿里云 ECS 搭建 nginx https nodejs 环境(二) 这次主要内容是 如何在 ubuntu 的nginx 下配置 二级域名. 一. 域名解析 首先你需要去到你的 域名服务商那边 进 ...
- 微信小程序实现简易留言板
微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...
- 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项
小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...
- spring boot系列03--spring security (基于数据库)登录和权限控制(下)
(接上篇) 后台 先说一下AuthConfig.java Spring Security的主要配置文件之一 AuthConfig 1 @Configuration 2 @EnableWebSecuri ...