解决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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
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
phpmyadmin操作流程
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php实现登录页面的简单实例
2019/09/29 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
学习python的几条建议分享
2013/02/10 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
python实现决策树分类(2)
2018/08/30 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
在django模板中实现超链接配置
2019/08/21 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
劳资专员岗位职责
2013/12/27 职场文书
户籍证明的格式
2014/01/13 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL