由于js的限制,vue无法进行监听数组;

  • 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时,例如: vm.items.length = newLength
  • 直接给对象赋值新属性

解决方式:
Vue.set( target, key, value )

测试代码:

Store的代码:

import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: {
TestArr: [1,2,5],
TestObj:{ name:'YK' }
},
getters: {
TestArr_getters: state => {
return state.TestArr
}
},
mutations: {
changeTestArr(state, obj) {
//state.TestArr[2]=3
//上面是错误演示,会改变值,但视图不会更新,在组件内同理
Vue.set(state.TestArr,2,3) //正确演示 // state.TestObj.age=11
//上面是错误演示,会改变值,但视图不会更新,在组件内同理
Vue.set(state.TestObj,'age',11)//正确演示
}
},
actions: {
changeTestArr_action(context){
setTimeout(function () {
context.commit('changeTestArr')
}, 1000)
}
}
});

组件内的代码:

<template>
<div>
<p>state的值:{{$store.state.TestArr}}</p>
<p>getterste的值:{{TestArr_getters}}</p>
<p>TestObj的值:{{TestObj}}</p>
<button @click="fun1">改变</button>
</div>
</template>
<script>
import {mapGetters,mapState} from 'vuex'
export default {
name: '',
computed:{
...mapState(['TestObj']),
...mapGetters(['TestArr_getters']),
},
methods:{
fun1(){
this.$store.dispatch('changeTestArr_action')
}
}
};
</script>
本篇文章转自https://www.jianshu.com/p/720c436edc1f

在Vuex更新,组件内的视图更新问题的更多相关文章

  1. Oracle并行更新的两种方式(merge/update内联视图)

    对于Oracle的两表联合更新的场景(有A.B两表,以A.id=B.id关联,根据B表中的记录更新A表中的相应字段),一般有update内联视图和merge两种方式,下面举例介绍:   创建用例表: ...

  2. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  3. watch 同步表单 记得$nextTick,否则不会同步更新到组件内

    watch 同步表单 记得$nextTick,否则不会同步更新到组件内 watch: { 'formData.aaa' (val) { this.$nextTick(() => { this.f ...

  4. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  5. CodePush热更新组件详细接入教程

    CodePush热更新组件详细接入教程 什么是CodePush CodePush是一个微软开发的云服务器.通过它,开发者可以直接在用户的设备上部署手机应用更新.CodePush相当于一个中心仓库,开发 ...

  6. 组件内或者vuex数据已变化但是页面显示或许不正常

    一.问题产生背景: 组件内的数据比较复杂,涉及多层次的数组和对象的情况下,某些值发生变化但是页面值没有变化:更新vuex的数据,同样在涉及多层次的数组和对象的情况下,某些值发生变化但是页面值没有变化: ...

  7. vue 组件中数组的更新

    今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...

  8. problem:vue之数据变更没有触发视图更新问题

    前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...

  9. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

随机推荐

  1. cefsharp解决闪烁

    CefSharp禁用GPU的命令行参数 其中,Major和Minor分别指代系统的主版本(大版本).次版本(小版本)版本号.其中指定了Windows7系统会禁用 GPU.,突发奇想,是否windows ...

  2. POST 请求中 multipart/form-data、 application/x-www-form-urlencoded 的区别

    以 Postman 为工具来看一下这两个编码类型的数据格式,假设我们需要传输的数据为 { "name": "test", "age": 18 ...

  3. 【原创】数据库基础之Mysql(2)主从库配置

    一 安装 # wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm# yum -y insta ...

  4. RIDE的下载及安装

    1.本机配置 windows8.1 python3.6.5,已配置环境变量 2.安装RIDE前需要安装的依赖包(使用pip就可以直接安装) 首先必须有robotframework 例如:pip ins ...

  5. yii2的csrf验证原理分析及token缓存解决方案

    本文主要分三个部分,首先简单介绍csrf,接着对照源码重点分析一下yii框架的验证原理,最后针对页面缓存导致的token被缓存提出一种可行的方案.涉及的知识点会作为附录附于文末. 1.CSRF描述 C ...

  6. java集合性能

    https://www.cnblogs.com/xyhuangjinfu/p/5429644.html

  7. Service,测试

    这里介绍一些symfony的一些其他内容 1.创建并使用自定义service 首先创建service目录,在下面自定义一个类,并设置测试方法,之后在resources目录下面的services.xml ...

  8. C#使用NanUI或ChromiumFx碰到的坑(一)

    最近在花时间封装一个Razor模板+NanUI的Winform组件,发现了有个神奇地方,,由于需要使用CfxResourceHandler,用于把对cshtml文件的请求,编译成html并返回给CEF ...

  9. jvm领域优秀博主

    dh5724 不过csdn iteye 博客园信息均被自己删除,只在一些问答中和引用中有部分信息. redcreen 对jvm有深入认知. RednaxelaFX oracle java 编译器开发者 ...

  10. Tomcat 本地运行正常,服务器部署后乱码问题

    Tomcat 在本地运行项目没啥问题,可是部署到服务器后就会发现有乱码的问题,这问题还是一半一半的,有些有,有些没有,这不是接收数据的时候会出现的乱码,是后台管理的页面中文乱码,我也是醉了, 把解决方 ...