解决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 播放器 控制
Jan 22 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
利用JS实现数字增长
Jul 28 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 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(8) php 数组
2010/03/05 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
php session的锁和并发
2016/01/22 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python编写登陆接口的方法
2017/07/10 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python操作redis数据库的三种方法
2020/09/10 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
教师的实习自我鉴定
2013/12/17 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
维修工先进事迹
2014/05/29 职场文书
中标通知书格式
2015/04/17 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
倡议书怎么写?
2019/04/11 职场文书
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript