为什么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`的 ...
随机推荐
- tree与GridView交互
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OgGridView.asp ...
- Visual Studio 2017 和 Visual Assist X 番茄助手的安装教程
声明:本文所提供的所有软件均来自于互联网,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 一.Visual Studio 2017的安装教程 Visual Studi ...
- 安装vue-cli-service和webpack
https://www.zacms.com/index.php/archives/106/ http://www.cnblogs.com/sloong/p/5584684.html
- 工具类封装之--CommonUtils
/** * @file_name : CommonUtils.java * @author : * @date : 2018年3月15日 * Description: */ package cn.xx ...
- Vue-admin工作整理(八): BUS | | 组件通信
一.父子组件之间通信 思路:定义一个个人组件,个人组件通常需要在前缀统一命名一下,如:AInput,该组件的作用是将编辑框中的内容获取并通过事件提交出去,然后在目标组件(store)中通过双向交互模式 ...
- python yaml用法详解
YAML是一种直观的能够被电脑识别的的数据序列化格式,容易被人类阅读,并且容易和脚本语言交互.YAML类似于XML,但是语法比XML简单得多,对于转化成数组或可以hash的数据时是很简单有效的. Py ...
- SpringBoot项目打成一个war包
springboot 带有内置Tomcat 服务器,可以直接将项目打包成jar运行,运行命令为: java -jar demo.jar 但是如果在需要把项目达成war包该怎么办呢?下面是将spring ...
- shell for 循环
test.sh #!/bin/bash for str in "C语言" "http://www.bilibili.com" "成立7年了" ...
- kafka可视化客户端工具Kafka Tool
1.下载 下载地址:http://www.kafkatool.com/download.html 2.安装 根据不同的系统下载对应的版本,我这里kafka版本是1.1.0,下载kafka tool 2 ...
- Docker Swarm集群中部署Traefik负载均衡器
一.创建单节点的Docker Swarm集群 docker swarm init 二.在Swarm集群中创建一个网络 docker network create --driver=overlay tr ...