为什么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`的 ...
随机推荐
- Intellij IDEA 远程链接hive,执行hsql
https://note.youdao.com/share/?id=75d82d9c5fab1e00de41c504a54dfcde&type=note#/
- 如何安装mariadb服务器和解决 can't connect to local mysql server through socket...
故障现象, ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.s ...
- Spring的基础注解
Spring的基础注解 1.注解的概述 注解是为了便于程序的调试而用于代替配置文件的一种程序语法,与配置文件具有互换性.通常基于注解编程的程序更加简洁. (注:使用Spring注解必须导入aop包) ...
- 微信小程序开发——简记
MVVM:提倡渲染(页面)和逻辑分离.页面(DOM),逻辑(后端代码JS等)—> JS操纵DOM.通过模板引擎,操纵和表现. 页面与程序,如何配合工作: 微信客户端会根据page.json配置, ...
- ios高级开发之多线程(一)
1.概念: 多线程(multithreading)到底是什么呢,它是指在软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件的支持,而能够在同一时间执行多个线程,进而提升整体处理性 ...
- spring mvc 简单的文件上传与下载
上传文件有很多种方法,这里主要讲解的是spring mvc内提供的文件上传 前提使用:spring mvc 在这个之前我们需要把环境给配置好 1:springmvc的XML配置文件加上这一段就即可, ...
- Xilinx Vivado的使用详细介绍(5):调用用户自定义封装的IP核
Zedboard OLED Display Controller IP v1 介绍 Author:zhangxianhe 本文档提供了快速添加,连接和使用ZedboardOLED v1.0 IP内核的 ...
- springboot后台控制重定向
第一种方式: 1. 使用 @Controller 注解而不是 @RestController 2.方法上不要加 @ResponseBody 然后直接返回你要去的页面 比如 return & ...
- webpack学习笔记 (二) html-webpack-plugin使用
这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...
- 华为交换机VRP系统命令试图