在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- ...
随机推荐
- 【转载】MySQL5.7 添加用户、删除用户与授权
mysql -uroot -proot MySQL5.7 mysql.user表没有password字段改 authentication_string: 一. 创建用户: 命令:CREATE USER ...
- WPF学习:3.Border & Brush
上一章<WPF学习:2.Layout-Panels-Countainers>主要介绍了布局,容器和面板.这一章主要开始介绍Border(边界)和Brush(画刷). 代码地址:http:/ ...
- JAVA 求数组中的最大值
package Code411;//求数组的最大值public class CodeArrayMax { public static void main(String[] args) { int ar ...
- HTML及CSS学习笔记
推荐博客:付铭 day-01 HTML 1.HTML 基本语法 html标签 单标签 <img /> .<img> 双标签 <html> </html> ...
- nodejs之connect
1.安装: npm install connect
- TCP报文首段格式
参考:https://www.bilibili.com/video/av9876107?from=search&seid=5217429010533979778 TCP(Transmissio ...
- lnoi2019游记
好诡异的省选...... day0: 莫名其妙的订了下午从sy到dl的火车,得五点多才能到,所以.......是不需要试机的吗...... 好吧... 看着停课的jflr们,感觉他们好强啊,像我这种酱 ...
- Golang 新手可能会踩的 50 个坑【转】
译文:https://github.com/wuYin/blog/blob/master/50-shades-of-golang-traps-gotchas-mistakes.md 原文:50 Sha ...
- SSM框架中常用的配置文件
学习框架,刚开始的时候最烦的就是一些配置文件,有很多需要配置的东西,今天把这些配置文件信息稍微整理一下,以后说不定会用的到. web.xml文件 <?xml version="1.0& ...
- spark MLlib Classification and regression 学习
二分类:SVMs,logistic regression,decision trees,random forests,gradient-boosted trees,naive Bayes 多分类: ...