解决vuex改变了state的值,但是页面没有更新的问题


Posted in Javascript onNovember 12, 2020

当state里属性定义为obj类型时,有时候出现:在其他页面修改完state值之后,其他页面并没有同步更新。

这时候需要转换一下。JSON.parse(JSON.stringify(obj))

this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj)))

补充知识:一个“错误”的vuex写法:vuex刷新了数据但是视图没有刷新

这是个很尴尬的问题,让我猜猜看你的代码是不是这样写的:

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <button @click="clickme">点击我</button>
 <span>{{countnumber}}</span>
 </div>
</template>
<script>
 export default {
 name: 'app',
 data() {
  return {
  countnumber: this.$store.state.count,
  }
 },
 methods: {
  clickme: function() {
  this.$store.commit("increment");
  }
 },
 }
</script>
<style>
 
</style>

那么恭喜你,无论你怎么平明点,都会是0.但是如果你是下面这种写法,那就是正确的了:

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <button @click="clickme">点击我</button>
 <span>{{$store.state.count}}</span>
 </div>
</template>
<script>
 export default {
 name: 'app',
 data() {
 },
 methods: {
  clickme: function() {
  this.$store.commit("increment");
  }
 },
 }
</script>
<style>
 
</style>

区别就是你直接关联到界面里面。为什么这样?不清楚,毕竟是别人的框架。

以上这篇解决vuex改变了state的值,但是页面没有更新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript判断对象是否相等实现代码
Mar 18 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
理解javascript中DOM事件
Dec 25 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 #Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 #Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 #Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 #Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 #Javascript
在vue中使用image-webpack-loader实例
Nov 12 #Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
You might like
php 读取shell管道传输过来的内容
2010/03/01 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
js实现交通灯效果
2017/01/13 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
深入理解python对json的操作总结
2017/01/05 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
如何教少儿学习Python编程
2020/07/10 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
财务会计实习报告体会
2013/12/20 职场文书
批评与自我批评材料
2014/02/15 职场文书
车辆工程专业求职信
2014/04/28 职场文书
节能减耗标语
2014/06/21 职场文书
开服装店计划书
2014/08/15 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
医院志愿者活动总结
2015/05/06 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers