为什么Vuex内数据改变了而组件没有进行更新?
这两天在进行一个首页的制作,结果就碰到了标题上所述的问题了,用了一天的时间在网上查资料。终于找出了问题所在
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内数据改变了而组件没有进行更新?的更多相关文章
- vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法
下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...
- vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决
<div id="app"> <ul > <li v-for="(val,key,idx) in list" > {{key ...
- 简述vuex的数据传递流程
简述vuex的数据传递流程 当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法.actions里面的每个方法中都会有一个commit方法,当方法执行的时候会通过comm ...
- 十、Vue:Vuex实现data(){}内数据多个组件间共享
一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
- vuex存取数据展示在table里-----第一次实现
之前也看了vuex的文档,对它的原理只是了解,看代码(仅自己复习.做笔记) 流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation ...
- 关于vuex的数据不直接给data而要通过computed
# 为什么vuex的数据不直接给data而要通过computed计算 ## 疑惑 其实一直以来使用vue的状态管理vuex都有一个疑惑,文档中介绍,vue的状态数据`$store.state.xx`的 ...
随机推荐
- The application to execute does not exist: 'C:\Users\Administrator\.dotnet\tools\.store\dotnet-aspnet-codegenerator\2.2.0-rtm-35687\dotnet-aspnet-codegenerator\2.2.0-rtm-35687\tools\netcoreapp2.1\any\
vs code mvc搭建基架执行命令操作出现的问题解决方式重新复制拷贝一份2.2.0命名为2.2.0-rtm-35687, 修改
- Numpy 基础
Numpy 基础 参考https://www.jianshu.com/p/83c8ef18a1e8 import numpy as np 简单创建数组 # 创建简单列表 a = [1, 2, 3, 4 ...
- Navicat无法连接SqlServer数据库
一.起因 原来安装过SqlServer 2008 R2,后来不用卸载了(没清理,单卸载),之后一直通过Navicat远程连接服务器的SqlServer使用. 前两天工作需要,又安装了SqlServer ...
- CAP原则和BASE定理
CAP原则和BASE定理 分布式系统 来自个人OneNote 以CAP理论为基础的三种解决方案 1.两阶段提交 所谓的两个阶段是指:第一阶段:准备阶段(投票阶段)和第二阶段:提交阶段(执行阶段). 准 ...
- 剑指offer:反转链表
问题描述 输入一个链表,反转链表后,输出新链表的表头. c++代码 /* struct ListNode { int val; struct ListNode *next; ListNode(int ...
- js ++i和i++的区别
++i和i++的定义: 1. 如果用前缀运算符对一个变量增1(减1),则在将该变量增1(减1)后,用新值在表达式中进行其他的运算. 2. 如果用后缀运算符对一个变量增1(减1),则用该变量的原 ...
- 给web请求加遮罩动画
效果预览: css: /*#fountainG{ position:relative; margin:10% auto; width:240px; height:29px }*/ #fountainG ...
- java代理通俗简单解析
1 代理 1.1 代理的概念和作用 代理的概念很好理解,就像黄牛代替票务公司给你提供票,经纪人代理艺人和别人谈合作.Java的代理是指实现类作为代理类的属性对象, ...
- 【编程语言】extern "C"让C++与C进行混合编程
最近工作不算轻松,现在作为一个项目的负责人统一管理着前端.后端.设计.产品,身上肩负着不小责任,虽然有压力但是对于自己也是一种锻炼.同时自己也在负责整个后端的架构设计,虽然后端经验不是很多,但是自己正 ...
- @RequestMapping的Ant风格URL
Ant风格资源地址支持3中匹配符 ? 匹配文件名中一个字符. * 匹配 文件名中任意字符 ** 匹配多层路径 例如 /hello/*/myspring 匹配 /hello/abc/mysprin ...