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& ...
随机推荐
- vue-cli(vue脚手架)
vue-cli用于自动生成vue+webpack项目. 安装webpack:npm install webpack -g 检查webpack是否安装成功和版本:webpack -v 如果是webpac ...
- 学习 Spring (一) Spring 介绍
Spring入门篇 学习笔记 Spring 是什么 Spring 是一个轻量级的 IoC (控制反转)和 AOP (面向切面)的容器框架 框架与类库的区别 框架一般是封装了逻辑.高内聚的,类库则是松散 ...
- JSON in SQL Server 2016
JSON functions in SQL Server enable you to analyze and query JSON data, transform JSON to relational ...
- bzoj1861
bzoj1861[ZJOI2006]书架 题目描述 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本 ...
- cf- Educational Codeforces Round 40 -D
题意:给你n个点,m条边,一个起点s,一个终点t的无向图,问在某两个点之间加一条边,不改变s到t的最短路径的值的加法有多少种,所有点一定连接: 思路:首先,默认相邻两点的权值都为1,会改变值的情况有: ...
- Java虚拟机构建对象过程小记
Java对象的内存分布 Java对象的构建 Java程序中,新建对象,除了常见的new语句之外,还可以通过反射机制.Object.clone方法.反序列化以及Unsafe.allocateInstan ...
- BZOJ2561最小生成树——最小割
题目描述 给定一个边带正权的连通无向图G=(V,E),其中N=|V|,M=|E|,N个点从1到N依次编号,给定三个正整数u,v,和L (u≠v),假设现在加入一条边权为L的边(u,v),那么需要删掉最 ...
- POJ1442-查询第K大-Treap模板题
模板题,以后要学splay,大概看一下treap就好了. #include <cstdio> #include <algorithm> #include <cstring ...
- 【XSY1262】【GDSOI2015】循环排插 斯特林数
题目描述 有一个\(n\)个元素的随机置换\(P\),求\(P\)分解出的轮换个数的\(m\)次方的期望\(\times n!\) \(n\leq 100000,m\leq 30\) 题解 解法一 有 ...
- MT【169】拉格朗日配方
已知$x^2+y^2+z^2=1$求$3xy-3yz+2z^2$的最大值______ 答案:$3$ 提示:$3(x^2+y^2+z^2)-(3xy-3yz+2z^2)=3\left(y+\dfrac{ ...