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

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. fedora23没有/var/log/messages &如何禁用后台自动更新软件?

    警告!! Linux是一个非常敏感的操作系统,若删除文件错误,很容易造成系统崩溃. fedora23没有/var/log/messages 不是没有messages这个文件,而是 从 fc core ...

  2. (转) NAS(神经结构搜索)综述

    NAS(神经结构搜索)综述 文章转载自:http://www.tensorinfinity.com/paper_136.html 本文是对神经结构搜索(NAS)的简单综述,在写作的过程中参考了文献[1 ...

  3. 2019 年 GrapeCity Documents 产品路线图

    前言 | 问题背景 随着软件行业引入新的硬件和操作系统,我们看到更多的托管框架与.NET技术保持同步.Microsoft的.NET Standard和.NET Core定义了一个跨平台规范,为应用程序 ...

  4. vue v-if:"TypeError: Cannot read property 'length' of undefined"

    在使用v-if判断一个数组大小为0时,会出现 length 是undefined的错误:[Vue warn]: Error in render: "TypeError: Cannot rea ...

  5. SAP 成套销售&按项目销售

    http://blog.sina.com.cn/s/blog_95ac31e30102x5we.html   分类: SAP_SD SAP 成套销售&按项目销售 一.业务简介 成套销售(KIT ...

  6. HTML5外包注意事项-开发HTML5游戏的九大坑与解决方法剖析

    随着移动社区兴起,势必带动HTML5的革命.未来一两年内,HTML5移动游戏必将呈现大爆发趋势. 以下是整理的HTML5游戏研发.市场趋势以及渠道布局和技术解决方案的内容.希望大家能从本文中找到对HT ...

  7. Oracle创建表、修改字段类型

    1.创建表 1.创建表 create table SCM_PER( --SCM_PER表名 ID ) primary key,--主键ID USERID ),--用户ID --Permission v ...

  8. toFixed()精度丢失;复选框全选、取消

    一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...

  9. 在线批量将gps经纬度坐标转换为百度经纬度坐标

    1.首先打开百度api示例页面: 在浏览器地址栏中输入:http://developer.baidu.com/map/jsdemo.htm#a5_3 2.修改代码 如下图,将需要批量转换的坐标,按规则 ...

  10. 20190320_head first pyhton学习笔记之构建发布

    1.把代码nester.py放入文件夹nester中,在文件夹中再新建一个setup.py文件,文件内容如下: from distutils.core import setup setup( name ...