解决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 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Node.js学习入门
Jan 03 Javascript
老生常谈js数据类型
Aug 03 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 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静态调用非静态方法的应用分析
2013/05/02 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
计算机操作自荐信
2013/12/07 职场文书
合作意向协议书范本
2014/03/31 职场文书
2015年元旦活动总结
2014/05/09 职场文书
2015年行政工作总结范文
2015/04/09 职场文书