问题描述:

使用Vuex管理数据时,在组件内使用$emit分发事件后,获取回来的数据要自动更新到该组件内,需要使用computed来计算更新。

一开始尝试使用赋值给data的方法,后来发现重新发起ajax请求数据后无法更新新数据。

因为data属性只是在组件实例化时赋值一次,依赖发生变化时不会更新,想要使用data来获取computed同样的效果可以对data的字段进行watch。

而计算属性是基于它的依赖缓存的。计算属性在它的相关依赖发生改变时会重新取值,所以当ajax请求回来的数据发生变化时,计算属性的值会进行更新,相关的模板引用也会重新渲染。

相比较而言使用computed更方便,如下是在实际应用中要不断更新的字段,this.$store.state.templateStorage.recommendTpl 是由ajax重新获取的数据。

computed: {
recommendTpl () {
return this.$store.state.templateStorage.recommendTpl;
}
},

Vuex异步请求数据通过computed计算属性值的更多相关文章

  1. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  2. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  3. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

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

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

  5. jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

  6. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. computed 计算属性

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...

  8. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  9. 小白学习vue第三天,从入门到精通(computed计算属性)

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

随机推荐

  1. Yii2的客户端验证

    如何配置Yii的客户端验证呢? 首先,应该配置验证规则的场景,即scenario 其次,应该配置验证规则,在验证规则中配置客户端验证 例如:

  2. LODOP打印控件进行批量打印

    Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...

  3. Spring Boot 构建电商基础秒杀项目 (四) getotp 页面

    SpringBoot构建电商基础秒杀项目 学习笔记 BaseController 添加 public static final String CONTENT_TYPE_FORMED = "a ...

  4. SQL to JSON Data Modeling with Hackolade

    Review: SQL to JSON data modeling First, let’s review, the main way to represent relations in a rela ...

  5. HTTP协议那些事儿(Web开发补充知识点)

    HTTP协议 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数据通信的基础. H ...

  6. maven + bat 实现快速编译打包模块代码

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  7. Codeforces Round #445 Div. 1

    A:每次看是否有能走回去的房间,显然最多只会存在一个,如果有走过去即可,否则开辟新房间并记录访问时间. #include<iostream> #include<cstdio> ...

  8. Dividing POJ - 1014 多重背包二进制优化

    多重背包模型  写的时候漏了一个等号找了半天 i<<=1 !!!!!! #include<iostream> #include<cstdio> #include&l ...

  9. Matplotlib学习---matplotlib里颜色,标记,线条类型参数的选择(colors, markers, line styles)

    颜色(Colors): 基础颜色: character color 'b' blue 'g' green 'r' red 'c' cyan 'm' magenta 'y' yellow 'k' bla ...

  10. pycharm 2016.1.4 软件注册码生成

    昨天电脑忽然坏了,没办法只能电脑重做系统,最让我头疼的是面对新电脑的软件安装和配置..... 由于之前电脑很久没有升级过ide,所以pycharm一直停留在2016.1.4的版本,当我打开pychar ...