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& ...
随机推荐
- Python 第三方库 cp27、cp35 等文件名的含义(转)
转自 https://blog.csdn.net/lanchunhui/article/details/62417519 转自 https://stackoverflow.com/questions/ ...
- NPOI 上传Excel功能(三)
4.验证Excel并上传 using DC.BE.Business.SAS; using DC.BE.Business.SYS; using DC.BE.Entity.SAS; using DC.BE ...
- Visual Studio常用插件整理
Visual Studio Tools for Git GIT代码管理工具 Resharper 代码生成工具 CSOutline2017 语法级别的代码折叠 ...
- ASP.NET Core 2.0 Cookie Authentication
using Microsoft.AspNetCore.Authentication.Cookies; using Microsoft.AspNetCore.Builder; using Microso ...
- Logging - MVC Using Log4net Save to File and Database
第一步:创建Config文件夹和log4net.config 第二步:在log4net.confg黏贴以下配置 <?xml version="1.0" encoding=&q ...
- 前端es6基础语法
1.let.const.var var是声明全局的变量,作用域是全局,const是声明全局的常量,不能修改,而let是块级变量只在当前声明的作用域中生效: { var a = 10; let b = ...
- Python内建GUI模块Tkinter(二)
Python核心组件 1.Button 按钮组件:一个简单的按钮,用来执行一个命令或别的操作. 参数解析: text:指定按钮上显示的文本: anchor: 指定按钮上文本的位置(N, NE, E, ...
- The Unique MST POJ - 1679 次小生成树prim
求次小生成树思路: 先把最小生成树求出来 用一个Max[i][j] 数组把 i点到j 点的道路中 权值最大的那个记录下来 used数组记录该条边有没有被最小生成树使用过 把没有使用过的一条边加 ...
- Codeforces1023E Down or Right 【贪心】
题目分析: 从起点开始询问终点连通性,优先右走.从终点开始询问起点连通性,优先上走. 代码: #include<bits/stdc++.h> using namespace std; in ...
- Codeforces379 F. New Year Tree
Codeforces题号:#379F 出处: Codeforces 主要算法:LCA+树的直径 难度:4.4 思路分析: 给出q个操作,每次在一个节点上接上两个叶子.每一次询问树的直径. 暴力做法:每 ...