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

实现这个效果的方式很多,比如当接口返回数据后,就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. xamarin.droid自己的示例工程有些都装不上模拟器,是因为它的architectures选项没设对

    也许是版本更迭导致的,有些老工程的architectures不对,如果x86不勾的话,是不能在genymotion的模拟器上跑的.

  2. 使用Cytoscape画PPI网络图

    打开Cytoscape软件,根据菜单导入string_interactions.tsv文件 File ----> Import ----> Network from File 会弹出下图对 ...

  3. Luogu 4254 [JSOI2008]Blue Mary开公司

    BZOJ 1568 学习了一波李超线段树. 大佬blog 这个东西专门用来维护插入一条线段和区间/单点的最大/最小值. 插入的时候讨论: 1.如果当前结点上没有线段,那么直接插入. 2.如果当前结点上 ...

  4. csv、txt读写及模式介绍

    1读写模式 r以读方式打开文件,可读取文件信息 w已写方式打开文件,可向文件写入信息.如文件存在,则清空,再写入 a以追加模式打开文件,打开文件可指针移至末尾,文件不存在则创建 r+以读写方式打开文件 ...

  5. Linux、Windows中的相对路径和绝对路径

    获取系统的分隔符的方式:System.getProperty("file.separator")   Windows为 \   Linux为/ Windows绝对路径: 以盘符开始 ...

  6. javascript总结11:JavaScript的自增自减

    1 自增自减 1.1 自增写法i++ 作用:在不参与运算的情况下,i++和++i都是在变量的基础加1 var n1 =123; //n1++ 等价于 n1 = n1 +1; ++n1 //等价于 n1 ...

  7. POJ3041 Asteroids(二分图最小点覆盖)

    Description Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape o ...

  8. HackOne

    使用 weight 属性实现视图的居中显示 一.在开发中有时候会遇到将一个控件在父控件居中显示.但是如果你直接用margin_*来进行限制的话就可能造成对于不同的型号的手机又不同显示的格式. 所以就可 ...

  9. Server Sql 多表查询、子查询和分页

    一.多表查询:根据特定的连接条件从不同的表中获取所需的数据 多表查询语法: SELECT table1.column, table2.column FROM table1, table2 WHERE ...

  10. DataTable中的select()用法

    1.在DataTable中执行DataTable.Select("条件")返回DataTable // <summary> // 执行DataTable中的查询返回新的 ...