关于vuex的项目中数据流动方式
vue的核心是数据驱动,所有数据变更的时机很重要,也就是watch的内容,一般是数据逻辑的操作。在使用vuex的项目中,我们在vuex中只是发请求、拿数据,在视图中来进行逻辑的操作、数据的更新。
1.vuex的作用,vuex在我的理解是这样的
我们把多个组件的共用数据放在vuex这个容器中,在视图中我们用过import引入这个state数据或者action方法,我们就拿到了vuex中的数据,有了数据我们在视图中,可以读取这些数据,但是不能更改,vuex中的数据只能在mutation中更改,如果在视图中更改,vue会发出警告,我一开始觉得不方便,但是其实如果大家都可以在视图找那个更改vuex的公共数据,那么数据就会变得混乱,vuex这样做确实是很合理的。
举个例子,我们想请求一个数组,我们把这个请求数组的方法写在actions中并用export 来暴露这个方法,我们在视图中(vue 文件)中引入,给一个按钮加监听,调用这个方法,这个方法在actions中执行,在actions中返回数据,我们根据返回的状态码进行判断成功失败。我们在action是的回调中执行dispath或者commit,把返回的数据提交到对应的mutation中,我们在index中定义state并暴露,在mutation中引入state,这样在mutation中我们把action中传过来的数据,赋值给state,最后我们在视图中引入index.js,我们就这样拿到了请求的数据。这个过程就是这样
vue视图请求-->(action-->mutation-->getter)-->index.js ---> vue视图拿到数据。
2.关于watch数据
拿到数据就可以了吗?当然不是我们要对数据进行处理,我们在举个例子,假如我们拿到数据后,我们要把这个数组赋值给data中的arr数组,并且打印出数组的长度,那么我们怎么知道拿到数据了呢?我们需要对拿到的vuex中的数据进行watch,我们来判断只要这个数据改变,我们就把数组赋值,并且打印数据。
我们打印成功了数据,但是我们再次点击按钮,为什么数据不打印了呢?arr的值是对的,但是不打印arr的length了,因为我们watch的值并没有发生改变,因为两次返回的值是相同的,所有我们会在每次请求前,调用一个request方法,来把我们监听的数据重置,当然这样我们打印了两次,所以我们数据逻辑怎么写要看具体情况。
关于vuex的项目中数据流动方式的更多相关文章
- vuex在项目中使用的一点总结
以下为vue后台管理项目中使用vuex的一点总结,截取了其中部分代码,如有什么错误,还望指出. 1. token 存储 登陆成功之后,需要把获取到的 token 存储到 vuex 中,配合 axios ...
- 记一次利用AutoMapper优化项目中数据层到业务层的数据传递过程。
目前项目中获取到DataSet数据后用下面这种方式复制数据. List<AgreementDoc> list = new List<AgreementDoc>(); ].Row ...
- SparkStreaming消费kafka中数据的方式
有两种:Direct直连方式.Receiver方式 1.Receiver方式: 使用kafka高层次的consumer API来实现,receiver从kafka中获取的数据都保存在spark exc ...
- objective C中数据持久化方式1--对象归档
第一.数据持久化的方式: NSKeyedArchiver--对象归档 属性列表化(NSArray.NSDictionary.NSUserDefault) SQlite数据库.CoreData数据库 其 ...
- 25、vuex改变store中数据
以登录为例: 1.安装vuex:npm install vuex --save 2.在main.js文件中引入: import store from '@/store/index.js'new Vue ...
- GIS项目中数据开源、工具开源、开发开源的解决方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 摆脱免费地图开发包的约束,拒绝商业地图软件的费用,高效.精确.完备是我 ...
- 在Spring MVC项目中,注解方式使用 .properties 文件及 UTF-8编码问题
xml配置 <!-- 配置文件 --> <bean id="configProperties" class="org.springframework.b ...
- ios中数据存储方式
以上三种不能存储大批量数据 plist只能先取出来 里面的数据 覆盖存储 SQLLite3 数据库 纯C语言 轻量级 CoreData 基于SQLLite3 OC版本 重量级 大批量数据缓存 SQL ...
- vue-cli3 项目中通过 CDN方式 使用 echarts
1.html 中引入 echarts html中添加script标签如下: <script src="//cdn.bootcss.com/echarts ...
随机推荐
- SparkCore基础(二)
* SparkCore基础(二) 继续探讨SparkCore,开门见山,不多废话. SparkApplication结构探讨 包含关系: 之前我们运行过很多App了,其实每一个App都包含若干个Job ...
- asp.net 项目发布注意点
在修改了某些代码后,要发布到服务器 这时候 ,在本地发布完把对应的文件复制到服务器上覆盖即可. 1.如果修改的是.cs .asmx等文件,则需要覆盖其对应项目名称的.dll文件 2.如果修改的是.h ...
- 关于eclipse的注释和反注释的快捷键
使用eclipse那么久了额,对注释和反注释的快捷键一直很模糊,现在记下来,方便查看. 注释和反注释有两种方式.如对下面这段代码片段(①)进行注释: private String value; pri ...
- 四、YOLO-V1原理与实现(you only look once)
可以看成图像分类与定位的结合,给定一张图片,目标检测系统要能够识别出图片的目标并给出其位置,由于图片中目标数是不定的,且要给出目标的精确位置,目标检测相比分类任务更复杂.目标检测的一个实际应用场景就是 ...
- Linux下切换python版本
http://www.cnblogs.com/rhjeans/p/5499193.html
- Thumb指令集与ARM指令集的差别
Thumb指令集 Thumb指令能够看做是ARM指令压缩形式的子集.是针对代码密度[1]的问题而提出的.它具有16为的代码密度.Thumb不是一个完整的体系结构,不能指望处理程序仅仅 ...
- linux设备驱动归纳总结(三):4.ioctl的实现
linux设备驱动归纳总结(三):4.ioctl的实现 一.ioctl的简单介绍: 尽管在文件操作结构体"struct file_operations"中有非常多相应的设备操作函数 ...
- BootstrapDialog模态框
5最近是比较烦直接使用Bootstrap里面的模态框,满屏都是模态框代码,看得心烦.然后想起以前使用的BootstrapDialog.show()的方式,挺简单好用的.然后就拿出来分享一下. 1.下载 ...
- 分析一下jquery中的ajax操作
在web前端开发中,ajax是很重要的一项技术,用原生写起来很是麻烦,需要一大堆js代码,而到了jq里就被精简了许多,一起来看看: jquery中的ajax分为三种方式: 1.$.get(),get方 ...
- Android Retrofit网络请求Service,@Path、@Query、@QueryMap、@Map...
http://blog.csdn.net/jdsjlzx/article/details/51607867