Vuex异步请求数据通过computed计算属性值
问题描述:
使用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计算属性值的更多相关文章
- 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串
cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...
- Vue中computed计算属性
话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...
- vue computed计算属性和watch监听属性解疑答惑
computed计算属性 计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...
- jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)
1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callba ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- computed 计算属性
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- 小白学习vue第三天,从入门到精通(computed计算属性)
computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...
随机推荐
- DAY08、文件操作
一.文件操作模式汇总: 主模式: r:读模式 w:写模式(无创建,有清空) a:追加(有创建的功能) x:写,必须自己创建文件,否则报错 从模式: t:文本操作(默认模式)r >rt,w> ...
- python数据结构与算法第十七天【概率算法】
1. 古典概率 例如:麻将开始摸到的14张牌中无将的概率,两张相同的牌即为将,则有: 所有的情况:从136张牌中选出14张牌,为C136-14 无将的情况:将不同的牌分组,共有34组,依次取14张牌, ...
- web浏览器兼容问题
1.居中问题 div中,ie默认居中,而ff(firefox)默认是向左对齐.解决办法:margin 0 auto 2.高度问题 如果有两个div排列或者嵌套,如果第一个div设置了高度,而内容超出d ...
- thinkphp视图中插入php代码
性别: <?php if($item['sex'] == 1):?> 男 <?php else:?> 女 <?php endif;?> 错误:<?php ec ...
- 【Python练习题】程序3
3.题目:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?x+100 = n*nx+100+168 = m * m 所以(m+n)*(m-n) =168 #题 ...
- 了解AutoCAD对象层次结构 —— 2 ——文档
再次想象另外一个场景:启动AutoCAD程序后,您新建了两个.dwg文件,也就是说创建了两个文档(Document)对象.将窗口进行层叠,您看到的窗口应该与下图类似: 图 4‑3 如何访问这些文档呢? ...
- SpringBoot之get请求404
后台:SpringBoot 前台:VUE 异常:调get接口,返回404 场景:get请求传参,后台返回n条数据,不传参则返回所有 原因:原请求url为"~/one/{param}" ...
- zabbix自动注册
实现方法是: 第一: 选择动作-->事件源-->自动注册-->创建动作 第二: 动作-->触发条件-->主机元数据-->contains-->Linux 第四 ...
- MT【253】仿射和蒙日圆
如图,设点$M(x_0,y_0)$是椭圆$C:\dfrac{x^2}{2}+y^2=1$上一点,从原点$O$向圆$M:(x-x_0)^2+(y-y_0)^2=\dfrac{2}{3}$作两条切线分别与 ...
- centos install redmine (项目管理工具)
安装环境:Centos.mysql.Ruby.Apache.Redmineyum updateyum -y groupinstall "Development Tools"yum ...