解决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 相关文章推荐
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue文件树组件使用详解
Mar 29 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
vue实现移动端div拖动效果
Mar 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
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php简单复制文件的方法
2016/05/09 PHP
php实现socket推送技术的示例
2017/12/20 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
python执行等待程序直到第二天零点的方法
2015/04/23 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python编程中的文件操作攻略
2015/10/16 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python打印异常信息的两种实现方式
2019/12/24 Python
python 实现字符串下标的输出功能
2020/02/13 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
办公室经理岗位职责
2014/01/01 职场文书
2014年新教师工作总结
2014/11/08 职场文书
环卫工作个人总结
2015/03/04 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL