我要实现的就是,当接口返回数据时,我在任何组件中都能感知到到该数据的变化,然后根据业务逻辑进行处理、展示。

实现这个效果的方式很多,比如当接口返回数据后,就emit这数据,在另外组件中on接收渲染即可,但是我不想用这种,

所以就换了另外一种方式:当接口返回数据时,将数据commit到state,需要对其作出反应的组件中,使用computed将

计算属性将混入到 Vue 实例中,也就是在计算属性中返回某个状态。同时使用watch对其属性变化进行监听,且进行相关处理。

相关代码如下:

接口返回数据后,commit更新state中的数据。

mutations中的操作是:

需要对该变化作出反应的组件中,代码如下,其中watch里面可进行相应业务处理。

computed 和 watch 组合使用,监听数据全局数据状态的更多相关文章

  1. Android 监听ContentProvider的数据改变

    今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...

  2. Android_通过ContentObserver监听短信数据变化

    1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox     ...

  3. 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据

    1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...

  4. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  5. 监听Listview的滚动状态,是否滚动到了顶部或底部

    /** * @author:Jack Tony * @description : 监听listview的滑动状态,如果到了顶部就刷新数据 * @date :2015年2月9日 */ private c ...

  6. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  7. .Net客户端监听ZooKeeper节点数据变化

    一个很简单的例子,用途是监听zookeeper中某个节点数据的变化,具体请参见代码中的注释 using System; using System.Collections.Generic; using ...

  8. 监听指定端口数据交互(HttpListenerContext )

    很怀念以前做机票的日子,,,,可惜回不去 以前的项目中的,拿来贴贴 场景:同步第三方数据,监听指定地址(指定时间间隔,否则不满足,因为需要处理粘包问题,改篇未实现) 主要内容四个文件:下面分别说下每个 ...

  9. 小程序批量获取input的输入值,监听输入框,数据同步

    在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事件来同步数据.这样做很麻烦.下面的方法可以解决,只需要一个方 ...

随机推荐

  1. 20-取石子动态规则(hdu2516 斐波那契博弈)

    http://acm.hdu.edu.cn/showproblem.php?pid=2516 取石子游戏 Time Limit: 2000/1000 MS (Java/Others)    Memor ...

  2. SqlServer-geography && Spatial result

    说起geography(地理)这个类型,我感觉好陌生,以前真的没有见过,今天在查询某个Address表的时候,却发现了新大陆——Spatial result(空间的结果). (1)表的结构 (2)查询 ...

  3. BT下载的原理 和疑问

    我心中有几个疑问,同时也搜索了点素材,肯能对理解问题有帮助. BT下载,即P2P下载,是一种不需要中心化服务器的下载,实现原理是,每个客户端在下载的时候也作为服务器. 我的疑问是,P2P各个节点是如何 ...

  4. Mybatis——逆向工程

    一.引入依赖 mybatis-generator-core-1.3.2.jar 二.基于XML的配置 <?xml version="1.0" encoding="U ...

  5. Instruments Tutorial for iOS: How To Debug Memory Leaks【转】

    If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter. Thanks for vis ...

  6. is/as操作符

    is/as操作符,是C#中用于类型转换的,提供了对类型兼容性的判断,从而使得类型转换控制在安全的范畴,提供了灵活的类型转换控制. is规则:检查对象的兼容性,查看对象的类型是否完全一样,返回值 tru ...

  7. React学习笔记4

    遇到的问题 目前模板是自己任意定义的,样式不好控制 在组件设计时,可以把页面数据显示的地方,分割父子组件嵌套的结构,比如,商品数据显示列表,把组外层容器看成是父组件,里面是数据显示的渲染模板,看成是子 ...

  8. android 仿QQ气泡聊天界面

    1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效 ...

  9. docker 镜像 容器删除

    Docker 容器镜像删除   1.停止所有的container,这样才能够删除其中的images: docker stop $(docker ps -a -q) 如果想要删除所有container的 ...

  10. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...