这两天在进行一个首页的制作,结果就碰到了标题上所述的问题了,用了一天的时间在网上查资料。终于找出了问题所在

Vuex的数据写在store里,在组件中需要用到this.$store.commit() 来调用store中mutations 里面的一些数据处理方法来向后端请求数据。并在computed计算属性中通过getters来获取Vuex的数据。

在控制台中查看Vuex获取后端数据的情况,数据获取完成并且被getters到组件中,但组件显示数据居然还是空的。而computed是会自动监听数据变化进行组件更新的。这里为什么没有生效呢?

原因当然是因为没有监听到数据变化。为什么没有监听到数据变化呢?

其实,是由于vue对数组数据的变化只能监听到以下几种变化

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

而我在对数据进行赋值的时候是直接用 a[i] = b[i]的方式进行赋值的。如果换成a.push(b[i])那么视图就会随着数据的变化而更新了。

为什么Vuex内数据改变了而组件没有进行更新?的更多相关文章

  1. vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法

    下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...

  2. vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决

    <div id="app"> <ul > <li v-for="(val,key,idx) in list" > {{key ...

  3. 简述vuex的数据传递流程

    简述vuex的数据传递流程 当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法.actions里面的每个方法中都会有一个commit方法,当方法执行的时候会通过comm ...

  4. 十、Vue:Vuex实现data(){}内数据多个组件间共享

    一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...

  5. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  6. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  7. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  8. vuex存取数据展示在table里-----第一次实现

    之前也看了vuex的文档,对它的原理只是了解,看代码(仅自己复习.做笔记) 流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation ...

  9. 关于vuex的数据不直接给data而要通过computed

    # 为什么vuex的数据不直接给data而要通过computed计算 ## 疑惑 其实一直以来使用vue的状态管理vuex都有一个疑惑,文档中介绍,vue的状态数据`$store.state.xx`的 ...

随机推荐

  1. MemoryStream请求与接收

    //流请求 static void Main(string[] args) { Console.WriteLine("Hello World!"); //Console.ReadL ...

  2. kamailio 云部署 配置NAT

    公有云配置NAT 第一步:将内网ip广播至公网ip,编辑/etc/kamailio/kamailio.cfg文件,搜索listen,添加如下配置 # listen=udp: listen= adver ...

  3. matlab 入门

    ---恢复内容开始--- 1.cast表示将元素转化成对应的ASCII值 如cast('hellothere','uint8')输出结果为104 101 108 108 111 116 104 101 ...

  4. Android之人脸识别

    **前言** 人工智能时代快速来临,其中人脸识别是当前比较热门的技术,在国内也越来越多的运用,例如刷脸打卡.刷脸App,身份识别,人脸门禁等等.当前的人脸识别技术分为WEBAPI和SDK调用两种法方式 ...

  5. ape 文件 转化为mp3 文件

    试了很多软件,最后才发觉 any-audio-converter最好用. 可以吧ape 按 cue切割好,然后转化成 MP3 官网可以免费下载: https://www.any-audio-conve ...

  6. JVM垃圾回收(三)- GC算法:基础

    GC算法:基础 在介绍GC算法在实际场景中的实现之前,我们先定义一些必要的术语,以及GC算法的基本准则.具体的细节会因收集器的不同而稍有区别,但是基本上来说,所有的收集器会关注以下两个方面: 找出所有 ...

  7. Java多线程概念

    1 多线程 1.1 什么是进程? 应用程序的一次运行产生进程. 为什么存在进程的概念? 1.2 什么是线程 参考:https://www.cnblogs.com/geeta/p/9474051.htm ...

  8. RecyclerView嵌套ScrollView导致RecyclerView内容显示不全

    我们在使用RecyclerView嵌套至ScrollView内的时候 RecyclerView不在屏幕内的数据会不显示出来,这里是一个坑,我们需要重写RecyclerView /** * Create ...

  9. Caffe on Mac OS X 10.11

    在Mac环境安装Caffe环境(CPU_ONLY) http://blog.csdn.net/xidiancoder/article/details/52081519   有问题 http://blo ...

  10. selenium在scrapy中的使用、UA池、IP池的构建

    selenium在scrapy中的使用流程 重写爬虫文件的构造方法__init__,在该方法中使用selenium实例化一个浏览器对象(因为浏览器对象只需要被实例化一次). 重写爬虫文件的closed ...