为什么Vuex内数据改变了而组件没有进行更新?

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

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

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

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

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

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

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

原文地址:https://www.cnblogs.com/The-master-of-time/p/10614750.html

时间: 2024-10-31 09:36:45

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

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

<div id="app"> <ul > <li v-for="(val,key,idx) in list" > {{key}} {{val}} {{idx}} </li> </ul> </div> <script> var app = new Vue({ el: '#app', created(){ setTimeout(()=>{ this.listp["1&qu

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

一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似react的redux) 1.2什么情况下使用vuex 虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架.这需要对短期和长期效益进行权衡. 如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.确实是如此--如果您的应用够简单,您最好不要使用 Vuex.一个简单的 gl

Android学习笔记二十二.使用ContentProvider实现数据共享(五).监听ContentProvider的数据改变

一.使用ContentProvider管理多媒体内容 Android提供了Camera程序来支持拍照.拍摄视频,用户拍摄的相片.视频都将存放在固定的位置.Android同样为这些多媒体内容提供了ContentProvider,所以我们可以通过使用ContentProvider实现其他应用直接访问Camera所拍摄的照片.视频等. 1.多媒体ContentProvider的Uri (1)MediaStore.Audio.Media.EXTERNAL_CONTENT_URI:存储在外部存储器(SD卡

查询表数据的时让表内数据全大写、小写、首字母大写、前几位字母大写

select                       Upper(Substring(列名, 1, 1)) + Lower(Substring(列名, 2,LEN(列名))) AS 想显示的列名,        UPPER(列名) AS 想显示的列名,                   Upper(Substring(列名, 1, 6)) + Substring(列名, 7,LEN(列名)) AS 想显示的列名,       LOWER(列名)AS 想显示的列名,             

模拟QQ分组(具有伸缩功能) SimpleExpandableListAdapter 适配器的用法,并且可添加组及其组内数据。

1 package com.lixu.qqfenzu; 2 3 import java.util.ArrayList; 4 import java.util.HashMap; 5 import java.util.List; 6 import java.util.Map; 7 8 import android.app.Activity; 9 import android.content.Context; 10 import android.graphics.Color; 11 import an

vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"><

Android,监控ContentProvider的数据改变

有时候应用中需要监听ContentProvider的改变并提供响应,这时候就要利用ContentObserver类了 不管是ContentProvider中实现的,insert,delete,update方法中的任何一个,程序都会调用getContext().getContentResolver().notifyChange(uri,null); 这行代码可用于通知所有注册在该Uri上的监听者,该ContentProvider所共享的数据发生了改变 监 听ContentProvider数据改变的

浅谈控件(组件)制作方法一(附带一delphi导出数据到Excel的组件实例)(原创)

来自:http://blog.csdn.net/zhdwjie/article/details/1490741 ------------------------------------------------------------------- 从99年学习delphi开始,我就被它的快速开发迷上了,那时候刚接触编程,对可视化开发特别来劲,原因嘛,不外乎是比C更快的实现啦,这几年来,从delphi的C/S到三层B/S,大大小小也写过一些软件,自认为这delphi也就这么些功能吧,自从最近偶得一

extjs grid数据改变后刷新的实现

做了一个编辑extjs grid记录的窗体,但更改数据后,怎么重新刷新grid让数据显示呢? 做了半天的尝试,其实到最后只需一句话,faint:-) this.store.reload(); 不用加任何参加都可以了:-) extjs grid数据改变后刷新的实现