vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解
1、vuex简介以及创建一个简单的仓库
vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情况下,推荐使用vuex管理。Vuex状态管理有五个核心的概念,分别为state、getters、actions、mutations、modules,接下来,将一起来研究一下这五个对象的具体使用,在此之前我们先在src文件下创建一个状态管理文件夹store,创建index.js文件(注:下图是在项目中更改,不要被其他代码干扰,关注标记就行了)
在main.js中引用并在vue实例中注册
接下来我们在index.js中创建一个简单的状态管理,并在其他组件中获取和更改:
如上图便是一个最基础的状态管理,用到了刚刚五个属性中的两个,接下来我们来解析一下代码,首先引入vue以及vuex,并在vue中使用,然后创建一个store实例。然后我们来说一下两个属性,第一个为state,它是一个对象,它的的作用相当于仓库的容器,用来储存所有公共数据;第二个为mutations,它也是一个对象,对象里面是一个一个的方法,这些方法说白了就是来储存和改变state里面的数据;关于基础的状态管理我们就了解完了,接下来我们在组件中去获取和改变状态管理中的数据;
我们在mounted函数中获取到了状态管理数据,结果为null,因为我们定义的就是null,下面我们来改变状态管理中的treeData值;
我们通过store的commit方法提交改变状态值,第一个参数为mutations里面的方法名,第二个参数为要改变的数据值,改变后立马获取就能得到改变后的值,一般多用在多组件之间的通信和数据共享。以上就是创建一个基本的状态管理库
2、vuex的模块化管理
想象一下,如果管理数据多了起来,index.js也将变成一个数据庞大的文件,难以维护,而且还有一些复杂的需求也难以满足,这个时候我们就想起了模块化管理,是的,状态管理也提供了模块化管理,这就是五个概念中的modules,它的出现便是为了模块化管理,下面我们在store文件夹下面构建modules文件夹,用来存放模块js文件。
下面是我们index.js改变的代码
下面是test.js中的代码
上面结构就是最基本的模块化状态管理,当然在组件的获取方式也得改变,代码如下
如上图就是模块化管理的获取方式;
3、vuex中的actions和getters
五个重要概念中还剩下getters、actions这两个概念,我们先说actions吧,actions和mutations非常接近,都是用来处理state中的数据,但是它可以异步处理,而mutations中只能同步,但是actions却不能直接处理state中的数据,它必须借助mutations里面的函数,所以一定要记住,能改变state中数据的方法,只有mutations可以做到。
那么我们现在来探讨一下mutations为什么不能异步!!!先上代码
现在我们把赋值state值改为异步,然后再来获取一下
结果为两个null,因为状态是实时获取的,而获取到的时候异步还没开始执行,所以都为null。这样就不能实时的改变获取数据,导致数据获取总是“慢了一拍”,实际需求中需要从状态管理中调取接口从后台获取数据,而接口都是异步的函数,那怎么办呢?所以actions的出现就是为了解决这个疑难杂症的,让我们来操作一番。上代码:
在test对象中加入actions对象,对象里面的函数其实就是对数据进行操作后再提交到状态管理mutations里面来改变数据,这里多用于异步操作,比如在函数请求后台数据后返回组件页面(不推荐)或者异步改变状态管理里面的值,它多用于和另外的一个概念一起配合使用,那就是getters属性,getters属性相当于组件的computed属性,它可以处理和缓存state中的数据,当state中有更新的时候它也会跟着更新,接下来我们来部署getters,首先在store创建getters.js文件
getters.js代码,getters需要在store中注册;
这里我们过滤上面我们改变的数据,一律改为“我是阿格斯之盾”,接着在刚刚输出的地方打印出来看看:
这里获取getters里面的属性值的方法可以直接通过getters暴露给store的属性中直接获取
4、vuex中的辅助函数
这里我们只说mapState函数,其他函数都和它类似,感兴趣的小伙伴可以自行了解哟
mapState辅助函数
当一个组件需要同时获得多个状态的时候,为每个状态去声明显得代码臃肿,这个时候就得用到mapState函数了:
先在组件中导入mapState函数
然后在computed中导入mapState函数,这里用的是扩展运算符,然后就可以在函数中直接获取到test状态里面的所有数据了,其他的几个辅助函数都和这个差不多,感兴趣的小伙伴自行了解一下吧,学无止境,喜欢就点个赞吧~
vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解相关推荐
- vue状态管理存取数据_Vue中的数据通信和状态管理
Vuex Vuex用于多组件之间的状态共享. 如果多个组件共享多个状态,那么这些组件之间的关系存在以下几种情况: 父子关系 兄弟关系 堂(堂堂...)兄弟关系 祖先后台(多级嵌套)关系 那么,在这些组 ...
- 【TensorFlow】TensorFlow从浅入深系列之八 -- 教你学会变量管理
本文是<TensorFlow从浅入深>系列之第8篇 TensorFlow从浅入深系列之一 -- 教你如何设置学习率(指数衰减法) TensorFlow从浅入深系列之二 -- 教你通过思维导 ...
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- vue状态管理存取数据_Vuex的安装到使用,Vue框架数据和状态的管理神器
在用Vu需的请本现等现近求项求人这行的近求项求人e框架进行开发的时候,如果项目的业务逻辑比较复杂,父子组件.兄弟组件.非兄弟组件之间的通讯相对频繁的时候,项目的后期维护会变得特别麻烦,生怕影响到了哪一 ...
- 浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...
- vue 传递多行数据_vue 数据传递的方法
组件(Component)是 Vue.js 最强大的功能.组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题. 1.父组件向子组件传值 组件实例的作用域是 ...
- vue 传递多行数据_vue父组件向子组件传递多个数据的实例
在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个 ...
- vue摸板 大数据_Vue和DataV强强联合,这个大数据可视化模板你一定要拥有
项目名称:vue-big-screen 项目作者:奔跑的面条 开源许可协议:Apache-2.0 项目简介一个基于 vue.datav.Echart 框架的 " 数据大屏项目 ", ...
- vue读取excel表格数据_vue 利用 js-xslx 读取 excel 表格文件
文件读取~~~ 表格数据 excel读取数据.jpg // template // 文件选择,或者使用原生 imput type 为 file action="/" :on-cha ...
最新文章
- [HNOI2015]亚瑟王
- python / 解决 pyinstaller 打包后运行时提示找不到模块的问题
- python中输出菱形_用python打印菱形的实操方法和代码
- BigDecimal转String,int,double及简单操作运算、方法
- python怎么创建字符串_Python 字符串
- java swf 上传文件_[Pulgin] 利用swfupload实现java文件批量上传
- pdf怎么转换成ppt
- php替代换行符号,php换行符号替换与过滤例子
- 考研英语 - advanced
- Java日志体系---JUL源码解析
- Arthas线上问题定位神器
- PO:通过Floder限制订单汇总中采购单价及金额栏位
- 如何彻底删除打印机驱动程序
- form提交的几种方法
- Hive的JavaAPI操作
- HMS Core华为分析丨受众细分,多场景促进精益运营
- android手机号码恢复,安卓手机通讯录没有了怎么办?如何恢复手机通讯录
- QT5打开图片并显示
- 2008年MBA全国联考英语考试大纲
- Android程序安装包APK的制作
热门文章
- MySQL使用CREATE INDEX创建索引
- python 形参 拷贝_Day124:python中的变量、引用、拷贝
- linux 文件 跳板机_shell实现跳板机
- vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的?
- IDEA 上位?不!Eclipse Theia 1.0 发布!
- Spring注解@Value获取属性文件值且解决在controller无法获取到值的问题
- 在Tomcat7.0中设置默认服务器和不加端口名访问
- System.currentTimeMills()显示系统当前时间
- Android的圆角按钮和按钮颜色
- 用python写一个豆瓣通用爬虫并可视化分析