解决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实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
vue实现简易计算器功能
Jan 20 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 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP goto语句用法实例
2019/08/06 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
详解JavaScript函数
2015/12/01 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
JavaScript函数定义方法实例详解
2019/03/05 Javascript
js实现简单的秒表
2020/01/16 Javascript
Python中的迭代器漫谈
2015/02/03 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
Python hashlib模块的使用示例
2020/10/09 Python
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
护理职业生涯规划书
2014/01/24 职场文书
市场部管理制度
2014/02/02 职场文书
大学社团计划书
2014/05/01 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
MySQL插入数据与查询数据
2022/03/25 MySQL