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的项目中数据流动方式的更多相关文章

  1. vuex在项目中使用的一点总结

    以下为vue后台管理项目中使用vuex的一点总结,截取了其中部分代码,如有什么错误,还望指出. 1. token 存储 登陆成功之后,需要把获取到的 token 存储到 vuex 中,配合 axios ...

  2. 记一次利用AutoMapper优化项目中数据层到业务层的数据传递过程。

    目前项目中获取到DataSet数据后用下面这种方式复制数据. List<AgreementDoc> list = new List<AgreementDoc>(); ].Row ...

  3. SparkStreaming消费kafka中数据的方式

    有两种:Direct直连方式.Receiver方式 1.Receiver方式: 使用kafka高层次的consumer API来实现,receiver从kafka中获取的数据都保存在spark exc ...

  4. objective C中数据持久化方式1--对象归档

    第一.数据持久化的方式: NSKeyedArchiver--对象归档 属性列表化(NSArray.NSDictionary.NSUserDefault) SQlite数据库.CoreData数据库 其 ...

  5. 25、vuex改变store中数据

    以登录为例: 1.安装vuex:npm install vuex --save 2.在main.js文件中引入: import store from '@/store/index.js'new Vue ...

  6. GIS项目中数据开源、工具开源、开发开源的解决方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 摆脱免费地图开发包的约束,拒绝商业地图软件的费用,高效.精确.完备是我 ...

  7. 在Spring MVC项目中,注解方式使用 .properties 文件及 UTF-8编码问题

    xml配置 <!-- 配置文件 --> <bean id="configProperties" class="org.springframework.b ...

  8. ios中数据存储方式

    以上三种不能存储大批量数据 plist只能先取出来 里面的数据 覆盖存储 SQLLite3 数据库 纯C语言 轻量级 CoreData  基于SQLLite3 OC版本 重量级 大批量数据缓存 SQL ...

  9. vue-cli3 项目中通过 CDN方式 使用 echarts

    1.html 中引入 echarts         html中添加script标签如下:         <script src="//cdn.bootcss.com/echarts ...

随机推荐

  1. jquery的append/prepend和after/before有什么区别呢?

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

  2. SSRS 报表 递归列表

    SSRS 报表 递归列表 .需要数据集合中两个必备字段 ID PID 1.添加数据集合,在图上标记的地方点击右键添加数据集合,根据需求自己编写 2.点击插入选项卡 中的 矩阵  有两种方式 一种是 矩 ...

  3. Spring深入浅出(二)IOC的单例 ,继承,依赖,JDBC,工厂模式以及自动装载

    IOC的单例模式--Bean Spring中的bean是根据scope来决定的. scope有4种类型: 1.singleton:单例模型,表示通过Spring容器获取的该对象是唯一的.常用并且默认. ...

  4. java 多线程——join()方法

    在java语言中,join()方法的作用是让调用该方法的线程在执行完run()方法后,再执行join 方法后面的代码. 简单点说就是,将两个线程合并,用于实现同步的功能. 具体而言:可以通过线程A的j ...

  5. [POI2008]PLA-Postering(单调栈)

    题意 N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. (n<=250000,wi,di<=109) 题解 这种一堆矩形,又不像数据结构的题,一般都是单调栈. 考虑一个贪 ...

  6. 洛谷 P1754 球迷购票问题

    P1754 球迷购票问题 题目背景 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的 ...

  7. Android 使用DrawerLayout高速实现側滑菜单

    一.概述 DrawerLayout是一个能够方便的实现Android側滑菜单的组件,我近期开发的项目中也有一个側滑菜单的功能.于是DrawerLayout就派上用场了.假设你从未使用过DrawerLa ...

  8. 书剑恩仇录online全套源代码(服务端+client+文档)

    书剑恩仇录online全套源代码(服务端+client+文档).vc++开发,解压后将近10G大小,眼下网上最完整版本号,包括client源代码.服务端源代码.工具源代码.sdk.文档-- <书 ...

  9. Android页面事件挂接模拟

    Java没有C#的引用类型.因此事件的挂接一般都是利用接口来实现,有两种方式: 1)定义一个实现事件接口的类,然后实现接口方法,然后通过将这个类的实例加入到事件监听器里面: public class ...

  10. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...