在Vuex更新,组件内的视图更新问题
由于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更新,组件内的视图更新问题的更多相关文章
- Oracle并行更新的两种方式(merge/update内联视图)
对于Oracle的两表联合更新的场景(有A.B两表,以A.id=B.id关联,根据B表中的记录更新A表中的相应字段),一般有update内联视图和merge两种方式,下面举例介绍: 创建用例表: ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- watch 同步表单 记得$nextTick,否则不会同步更新到组件内
watch 同步表单 记得$nextTick,否则不会同步更新到组件内 watch: { 'formData.aaa' (val) { this.$nextTick(() => { this.f ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- CodePush热更新组件详细接入教程
CodePush热更新组件详细接入教程 什么是CodePush CodePush是一个微软开发的云服务器.通过它,开发者可以直接在用户的设备上部署手机应用更新.CodePush相当于一个中心仓库,开发 ...
- 组件内或者vuex数据已变化但是页面显示或许不正常
一.问题产生背景: 组件内的数据比较复杂,涉及多层次的数组和对象的情况下,某些值发生变化但是页面值没有变化:更新vuex的数据,同样在涉及多层次的数组和对象的情况下,某些值发生变化但是页面值没有变化: ...
- vue 组件中数组的更新
今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...
- problem:vue之数据变更没有触发视图更新问题
前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
随机推荐
- 翻译NYOJ
#include<iostream> #include<string.h> #include<stdio.h> using namespace std; ; int ...
- WX支付功能的调用
1.引入js. 2.微信支付的js.此处有的理解不知对不对,是照着老大的例子整改的~ $('.button').click(function () { var giftId = $('.show'). ...
- background-image属性
background-image 属性 实例,设置body元素的背景图像: body { background-image: url('paper.gif'); background-color: # ...
- Java设计模式迭代器
定义:提供一种方法,顺序访问一个集合对象中的各个元素,而又不暴露该对象的内部表示. 类型:行为型 适用场景: 访问一个集合对象的内容而无需暴露它的内部表示 为遍历不同的集合结构提供一个统一的接口 优点 ...
- js编码解码 punyCode
;(function(w) { var PunycodeModule = function () { function IdnMapping() { this.utf16 = { decode: fu ...
- Android 10开发者预览版功能介绍
Android P的开发者预览版最亮眼的功能莫过于支持“刘海屏”等屏幕显示.同样在适配可折叠设备方面,Android Q的第一个开发者预览版也很“接地气”,谷歌早在去年11月就发布了对可折叠设备的支持 ...
- Mybatis Annotation使用小结
Mybatis Annotation使用小结 之前一直有看过mybatis的注解使用方式,但没有去看过它的原理.今天看springboot-mybatis-annotation使用的时候,debug了 ...
- php接入支付宝的流程(转载)
php接入支付宝的流程写在这里供像我一样的小白参考. 1.首先要有一个创建一个应用(选好自己想要的功能,关于支付的功能,貌似都需要签约) 2.下载SDK&Dome(网址https://doc. ...
- Skeleton Screen -- 骨架屏--应用
案例:使用 现已经在支付的项目使用 用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading( ...
- git 入门教程之删除文件
删除文件 回忆一下文件的常见操作,新增文件,修改文件,删除文件等,新增和修改文件都单独讨论过,现在我们来研究一下如何删除文件. 你可能会说删除文件还不简单啊,直接 rm -rf <file> ...