解决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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
Node.Js中实现端口重用原理详解
May 03 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
实现一个简单得数据响应系统
Nov 11 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 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php 浮点数比较方法详解
2017/05/05 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
基于vue2.0实现简单轮播图
2017/11/27 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
javascript实现手动点赞效果
2019/04/09 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python之str操作方法(详解)
2017/06/19 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
2014和解协议书范文
2014/09/15 职场文书
整改落实自查报告
2014/11/05 职场文书
投资意向协议书
2015/01/29 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Redis分布式锁Redlock的实现
2021/08/07 Redis