解决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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
Javascript中的变量使用说明
May 18 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
layui表格实现代码
May 20 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Promise静态四兄弟实现示例详解
Jul 07 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开启安全模式后禁用的函数集合
2011/06/26 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
prototype1.4中文手册
2006/09/22 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
解析python实现Lasso回归
2019/09/11 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
数控专业个人求职信范文
2014/02/05 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
中药专业自荐信范文
2014/03/18 职场文书
入党政审材料范文
2014/12/24 职场文书
个人先进事迹材料
2014/12/29 职场文书
玄武湖导游词
2015/02/05 职场文书