解决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中链式调用之研习
Apr 07 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
Bootstrap基础学习
Jun 16 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
JavaScript oncopy事件用法实例解析
May 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 INI配置文件的解析实现分析
2011/01/04 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
js style动态设置table高度
2014/10/21 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python利用ansible分发处理任务
2015/08/04 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
详解supervisor使用教程
2017/11/21 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python实现批处理文件
2020/07/28 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
垃圾回收的优点和原理
2014/05/16 面试题
先进党组织事迹材料
2014/12/26 职场文书
刮痧观后感
2015/06/05 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS