解决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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
taro 实现购物车逻辑的实例代码
Jun 05 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实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
wxPython 入门教程
2008/10/07 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python WSGI的深入理解
2018/08/01 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
服务之星事迹材料
2014/05/03 职场文书
开幕式邀请函
2015/01/31 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
导游词之杭州西湖
2019/09/19 职场文书