问题描述：

使用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. linux操作命令 开发人员需要掌握的一些命令

    1.man 查看帮助 2.命令 --help 简单帮助 3.help cd 查看一些Linux 命令行的一些内置命令 4.cp  粘贴复制命令  eg:cp yum.log /root/ 5.find ...

  2. echo显示颜色

    如有转载,不胜荣幸.http://www.cnblogs.com/aaron-agu/ [;;34m hello aaron \[0m”

  3. 错误模块名称: KERNELBASE.dll错误

    今天在部署一个C/S程序的时候出了bug,日志都没有记载:本地调试当然是没问题的,所以不是代码问题,百度之发现KERNELBASE.dll这个文章说的比较靠谱,仔细研究了自己的配置文件后,果然是配置文 ...

  4. PLSQL 错误问题：Datebase character set (AL32UTF-8) and Client character set (ZHS16GBK) are different.

    (解决不了,网上用的是Orecal,我用的只是客户端.) 网上找到解决方法 打开注册表(ctr+R,输入regedit),根据报错提示找到注册表位置,但本机是win10 64位系统,根据以上路径找不到 ...

  5. SpringMVC 重定向到其他系统的页面的两种方式

    //测试重定向到另外的一个系统 @RequestMapping("/tttt") public void testRed(HttpServletResponse response) ...

  6. js的常用文档对象，document

    1.document的概念:window的子对象,由于DOM对象模型的默认对象就是window,因此Window对象中的方法和子对象不需要通过Window来引用. - 2.document的组成:属性 ...

  7. Hadoop Brief

    Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. [1]  Hadoop实现了一个分布 ...

  8. LitJson的用法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. Docker自制CentOS镜像

    系统环境:CentOS 7.3 将yum源切换到阿里源 可以直接写成一个脚本 #!/bin/sh mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos ...

  10. BZOJ2142礼物——扩展卢卡斯

    题目描述 一年一度的圣诞节快要来到了.每年的圣诞节小E都会收到许多礼物,当然他也会送出许多礼物.不同的人物在小E 心目中的重要性不同,在小E心中分量越重的人,收到的礼物会越多.小E从商店中购买了n件礼 ...